6

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

主页 | 福 | 酒吧 | 关于 | 接触

我该怎么做呢？

这是我尝试过的：

<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/AAAAAAAJiY/Ds0IpEyu78I/s800/menu.png

4

4 回答 4

4

可能有一种更清洁的方法来做到这一点。在站点地图中声明网址后，您几乎可以将它们用作模板中的常规链接。您可以将它们编写为纯 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>

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

于 2010-08-11T16:30:17.817 回答
3

要摆脱最后一行，您可以使用 :last-child 伪类：

ul.menu li:last-child {
  边框：无；
}
于 2010-04-06T11:48:10.627 回答
1

发现其他答案不令人满意后，我发现了自己的解决方案...

（请注意，我是 Lift 的新手，并且认为菜单很难手动编码）

解决方案

  • 部分使用MenuWidget（来自lift-widgets）来做启用超级菜单的管道
  • 不要使用 MenuWidget 来呈现菜单，因为它不能正确执行
  • 使用标准Menu.build渲染菜单
  • 添加额外的东西以正确终止菜单的“浮动”效果
  • 添加额外的东西以启用居中菜单

完整的解决方案可在： http ://subversion.assembla.com/svn/freshcode_public/learn_scala/lift/src/main/scala/code/snippet/CustomMenu.scala

包代码.snippet

导入 net.liftweb.widgets.menu.MenuWidget
导入 xml.{Text, NodeSeq}

对象自定义菜单 {

  私人 def styleElem = {
    <style type="text/css">
      {文本（
      ".float-center-item {\n" +
        " 剩下: 50%;\n" +
        " 位置：相对；\n" +
        "}\n\n" +
        ".float-center-wrapper {\n" +
        " 浮动：对；\n" +
        " 位置：相对；\n" +
        " 左：-50%;\n" +
        "}\n\n" +
        ".float-clear {\n" +
        " 清除：两者；\n" +
        "}\n" +
        "/* FireFox 的边距修正 */\n" +
        "ul.sf 菜单 {\n" +
        " 下边距: 0\n" +
        "}\n"
    )}
    </style>
  }

  def 渲染（在：NodeSeq）= {
    // 需要获取 MenuWidget 来提供管道
    // 我们自己渲染菜单，因为 MenuWidget 似乎没有正确完成。
    MenuWidget(List("No Group")) ++
      <头部>
        {styleElem}
      </head> ++
      <div class="float-center-wrapper">
          <lift:Menu.builder top:class="sf-menu float-center-item" linkToSelf="true" expandAll="true"/>
      </div> ++
      // 这个 div 正确地终止了浮动效果。
      <div class="float-clear"></div>
  }
}

用法：

<div class="lift:CustomMenu">没有</div>
于 2011-05-11T07:16:29.133 回答
1

您可能想尝试使<li>元素具有inline-block display。

ul.menu li {
   display: inline-block;
   *display: inline; zoom: 1; /* inline-block under IE */
   vertical-align: middle;
}

这样，它们的行为将更像块元素，并且可能与链接同步。此外，您可以尝试使用该line-height属性而不是添加垂直填充，因为 line-height 将以更精确的方式垂直居中文本。

于 2010-03-18T16:30:49.147 回答