Liftweb Menu customization

2019-03-13 21:15发布

站内文章 / HTML/CSS
40 0 0

问题:

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

回答1:

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.



回答2:

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

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


回答3:

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.



回答4:

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>


标签： css scala menu sitemap lift
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~