Liftweb Menu customization

I want to create a menu that looks like:

HOME | FOO | BAR | ABOUT | CONTACT

How might I go about doing this?

Here is what I have tried:

<lift:Menu.builder ul:class="menu" li_item:class="current" />

and

ul.menu li {
   display: inline;
   list-style-type: none;
   text-transform: uppercase;
   border-right: 1px solid white;
   padding-right: 5px;
}

li.current span {
   background: white;
   color: black; 
   padding: 5px 5px 3px 5px;
   font-size: 11px;
}

li.current a, a:visited, a:link {
   color: white; 
   padding: 5px 5px 3px 5px;
   font-size: 11px;
}

This gets close, but it doesn't look quite right. Also you end up with an extra line at the end. I want the lines to be the same height as the text.

http://lh5.ggpht.com/_5DxlOp9F12k/S2aFQHfupzI/AAAAAAAAJiY/Ds0IpEyu78I/s800/menu.png

There might be a cleaner way to do this. Once you've declared the urls in your sitemap, you can pretty much use them as regular links in your template. You would write them as pure html.

In Boot.scala:

val menus = List(
  Menu(Loc("home", List("index"), "Home")),
  Menu(Loc("foo", List("foo"), "Foo")),
  Menu(Loc("bar", List("bar"), "Bar")),
  Menu(Loc("about", List("about"), "About")),
  Menu(Loc("contact", List("contact"), "Contact"))
)
LiftRules.setSiteMap(SiteMap(menus: _*))

In your template, e.g. index.html:

<div id="menu">
  <a href="/index">Home</a> |
  <a href="/foo">Foo</a> |
  <a href="/bar">Bar</a> |
  <a href="/about">About</a> |
  <a href="/contact">Contact</a>
</div>

Or as said Debilski, you can also call each menu item by their name. It would be more Lift-iesc.

<div id="menu">
  <lift:Menu.item name="home"/>
  <lift:Menu.item name="foo"/>
  <lift:Menu.item name="bar"/>
  <lift:Menu.item name="about"/>
  <lift:Menu.item name="contact"/>
</div>

You can then add any style you want in an external stylesheet file or inside the page.

To get rid of the last line, you could use the :last-child pseudo-class:

ul.menu li:last-child {
  border: none;
}

You might want to try to make the <li> elements have an inline-block display.

ul.menu li {
   display: inline-block;
   *display: inline; zoom: 1; /* inline-block under IE */
   vertical-align: middle;
}

This way, they will behave much more like block elements and might sync with the links. Also, you can try playing with the line-height property instead of adding vertical padding, since the line-height will center the text vertically in a more precise manner.

Having found the other answers unsatisfactory I discovered my own solution...

(Note that I am new to Lift and believe menus are too difficult to code manually)

Solution

Partially use MenuWidget (from lift-widgets) to do the plumbing of enabling superfish menus
Don't use MenuWidget to render the menus as it doesn't do it properly
Use the standard Menu.build to render the menus
Add extra stuff to properly terminate the 'floating' effects of the menu
Add extra stuff to enable centered menus

Full solution is available at: http://subversion.assembla.com/svn/freshcode_public/learn_scala/lift/src/main/scala/code/snippet/CustomMenu.scala

package code.snippet

import net.liftweb.widgets.menu.MenuWidget
import xml.{Text, NodeSeq}

object CustomMenu {

  private def styleElem = {
    <style type="text/css">
      {Text(
      ".float-center-item {\n" +
        "  left: 50%;\n" +
        "  position: relative;\n" +
        "}\n\n" +
        ".float-center-wrapper {\n" +
        "  float: right;\n" +
        "  position: relative;\n" +
        "  left: -50%;\n" +
        "}\n\n" +
        ".float-clear {\n" +
        "  clear:both;\n" +
        "}\n" +
        "/* Margin fix for FireFox */\n" +
        "ul.sf-menu {\n" +
        "  margin-bottom: 0\n" +
        "}\n"
    )}
    </style>
  }

  def render(in: NodeSeq) = {
    // Need to get MenuWidget to provide the plumbing
    // We render menu ourselves because MenuWidget doesn't seem to do it properly.
    MenuWidget(List("No Group")) ++
      <head>
        {styleElem}
      </head> ++
      <div class="float-center-wrapper">
          <lift:Menu.builder top:class="sf-menu float-center-item" linkToSelf="true" expandAll="true"/>
      </div> ++
      // This div terminates the floating effects properly.
      <div class="float-clear"></div>
  }
}

Usage:

<div class="lift:CustomMenu">nothing</div>

来源：https://stackoverflow.com/questions/2175246/liftweb-menu-customization

标签

css

scala

sitemap

lift