发表新帖
发表新帖

Liftweb Menu customization

前端 未结
关注
4 697
悲哀的现实
悲哀的现实 2021-02-04 18:26

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:

&
相关标签:
4条回答
  • 甜味超标
    2021-02-04 19:01

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

    ul.menu li:last-child {
  border: none;
}
    0 讨论(0)
  • 盖世英雄少女心
    2021-02-04 19:06

    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 讨论(0)
  • 被撕碎了的回忆
    2021-02-04 19:16

    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 讨论(0)
  • 野性不改
    2021-02-04 19:22

    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)
 看不清?
提交回复
热议问题