css - Liftweb 菜单定制

Question

我想创建一个如下所示的菜单:

主页 |富 |酒吧 |关于 |联系方式

我该怎么做呢？

这是我尝试过的:

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

和

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;
}

这很接近，但看起来不太正确。最后你还会得到一条额外的线。我希望线条与文本高度相同。

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

Answer 1

可能有更简洁的方法来执行此操作。在站点地图中声明 url 后，您几乎可以将它们用作模板中的常规链接。你会把它们写成纯 html。

在 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: _*))

在您的模板中，例如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>

或者如 Debilski 所说，您还可以通过名称来调用每个菜单项。它会更像 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>

然后您可以在外部样式表文件或页面内添加您想要的任何样式。