Liftweb菜单定制 [英] Liftweb Menu customization

问题描述

我想创建一个类似以下的菜单：

I want to create a menu that looks like:

首页| FOO | BAR |关于|

HOME | FOO | BAR | ABOUT | CONTACT

我该怎么做？

Here is what I have tried:

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

这接近，但看起来不太对。此外，你最后有一个额外的行。我想要的线条与文本的高度相同。

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

推荐答案

可能有一个更干净的方法来做到这一点。在网站地图中声明网址后，您几乎可以将其用作模板中的常规链接。你会把它们写成纯HTML。

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.

在Boot.scala中：

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

在您的模板中，例如index.html：

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>

或者像Debilski一样，你也可以通过他们的名字调用每个菜单项。这将是更多的Lift-iesc。

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.

这篇关于Liftweb菜单定制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！