Liftweb 菜单定制

发布于 2024-08-20 12:13:09 字数 836 浏览 5 评论 0原文

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

HOME | FOO |酒吧|关于 |联系方式

我该怎么做？

这是我尝试过的：

<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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

岁月静好 2024-08-27 12:13:09

可能有一种更干净的方法来做到这一点。在站点地图中声明网址后，您几乎可以将它们用作模板中的常规链接。您可以将它们编写为纯 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 所说，您还可以按名称调用每个菜单项。这将更加提升-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>

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

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.

回复收藏 0 原文

陌路黄昏 2024-08-27 12:13:09

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

ul.menu li:last-child {
  border: none;
}

To get rid of the last line, you could use the :last-child pseudo-class:

ul.menu li:last-child {
  border: none;
}

回复收藏 0 原文

溺ぐ爱和你が 2024-08-27 12:13:09

您可能想尝试使

元素具有

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

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

You might want to try to make the <li> elements have an inline-block display.

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

This way, they will behave much more like block elements and might sync with the links. Also, you can try playing with the line-height property instead of adding vertical padding, since the line-height will center the text vertically in a more precise manner.

回复收藏 0 原文

半暖夏伤 2024-08-27 12:13:09

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

（请注意，我是 Lift 的新手，并且相信菜单太难手动编码）

解决方案

部分使用 MenuWidget （来自 lift-widgets) 进行启用 superfish 菜单的管道操作
不要使用 MenuWidget渲染菜单，因为它没有正确执行
使用标准 Menu.build 渲染菜单
添加额外的内容以正确终止菜单的“浮动”效果
添加额外的内容以启用居中菜单

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

package code.snippet

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

object CustomMenu {

  private def styleElem = {
    <style type="text/css">
      {Text(
      ".float-center-item {\n" +
        "  left: 50%;\n" +
        "  position: relative;\n" +
        "}\n\n" +
        ".float-center-wrapper {\n" +
        "  float: right;\n" +
        "  position: relative;\n" +
        "  left: -50%;\n" +
        "}\n\n" +
        ".float-clear {\n" +
        "  clear:both;\n" +
        "}\n" +
        "/* Margin fix for FireFox */\n" +
        "ul.sf-menu {\n" +
        "  margin-bottom: 0\n" +
        "}\n"
    )}
    </style>
  }

  def render(in: NodeSeq) = {
    // Need to get MenuWidget to provide the plumbing
    // We render menu ourselves because MenuWidget doesn't seem to do it properly.
    MenuWidget(List("No Group")) ++
      <head>
        {styleElem}
      </head> ++
      <div class="float-center-wrapper">
          <lift:Menu.builder top:class="sf-menu float-center-item" linkToSelf="true" expandAll="true"/>
      </div> ++
      // This div terminates the floating effects properly.
      <div class="float-clear"></div>
  }
}

用法：

<div class="lift:CustomMenu">nothing</div>

Having found the other answers unsatisfactory I discovered my own solution...

(Note that I am new to Lift and believe menus are too difficult to code manually)

Solution

Partially use MenuWidget (from lift-widgets) to do the plumbing of enabling superfish menus
Don't use MenuWidget to render the menus as it doesn't do it properly
Use the standard Menu.build to render the menus
Add extra stuff to properly terminate the 'floating' effects of the menu
Add extra stuff to enable centered menus

Full solution is available at:
http://subversion.assembla.com/svn/freshcode_public/learn_scala/lift/src/main/scala/code/snippet/CustomMenu.scala

package code.snippet

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

object CustomMenu {

  private def styleElem = {
    <style type="text/css">
      {Text(
      ".float-center-item {\n" +
        "  left: 50%;\n" +
        "  position: relative;\n" +
        "}\n\n" +
        ".float-center-wrapper {\n" +
        "  float: right;\n" +
        "  position: relative;\n" +
        "  left: -50%;\n" +
        "}\n\n" +
        ".float-clear {\n" +
        "  clear:both;\n" +
        "}\n" +
        "/* Margin fix for FireFox */\n" +
        "ul.sf-menu {\n" +
        "  margin-bottom: 0\n" +
        "}\n"
    )}
    </style>
  }

  def render(in: NodeSeq) = {
    // Need to get MenuWidget to provide the plumbing
    // We render menu ourselves because MenuWidget doesn't seem to do it properly.
    MenuWidget(List("No Group")) ++
      <head>
        {styleElem}
      </head> ++
      <div class="float-center-wrapper">
          <lift:Menu.builder top:class="sf-menu float-center-item" linkToSelf="true" expandAll="true"/>
      </div> ++
      // This div terminates the floating effects properly.
      <div class="float-clear"></div>
  }
}

Usage:

<div class="lift:CustomMenu">nothing</div>

回复收藏 0 原文

~没有更多了~

关于作者

拔了角的鹿

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

Liftweb 菜单定制

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

浪漫人生路

620vip

羞稚

走过海棠暮

你好刘可爱

陌若浮生

友情链接

Liftweb 菜单定制

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

浪漫人生路

620vip

羞稚

走过海棠暮

你好刘可爱

陌若浮生

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。