Liftweb 菜单定制 [英] Liftweb Menu customization

问题描述

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

首页 |FOO |酒吧 |关于 |联系方式

我该怎么做?

这是我尝试过的:

和

ul.menu li {显示:内联；列表样式类型:无；文本转换:大写；右边框:1px纯白色；padding-right: 5px;}li.current span {背景:白色；颜色:黑色;填充:5px 5px 3px 5px；字体大小:11px；}li.current a, a:visited, a:link {白颜色;填充:5px 5px 3px 5px；字体大小:11px；}

这很接近，但看起来不太对劲.此外，您最后会多出一行.我希望线条与文本高度相同.

http://lh5.ggpht.com/_9F12k/Ds0IpEyu78I/s800/menu.pngS2aFQHfupzI/AAAAAAAJiY/Ds0IpEyu78I/s800/menu.png

解决方案

可能有更简洁的方法来做到这一点.在站点地图中声明 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")),菜单(位置(联系人"，列表(联系人")，联系人")))LiftRules.setSiteMap(SiteMap(menus: _*))

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

<a href="/index">首页</a>|<a href="/foo">Foo</a>|<a href="/bar">Bar</a>|<a href="/about">关于</a>|<a href="/contact">联系方式</a>

或者如 Debilski 所说，您也可以按名称调用每个菜单项.这将是更多的 Lift-iesc.

<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"/>

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

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.

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