Liftweb Menu customization

Question

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

Answer 1

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.

Answer 2

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

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

Answer 3

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.