我想创建一个看起来像这样的菜单：
HOME | FOO | BAR |关于|联系
我该怎么做呢？
这是我尝试过的：
<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
解决方法
可能有一种更清洁的方法来做到这一点.在您的站点地图中声明网址后,您几乎可以将它们用作模板中的常规链接.你会把它们写成纯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>
