Настройка меню Liftweb - PullRequest
Новая
       12

Настройка меню Liftweb

6 голосов
/ 01 февраля 2010

Я хочу создать меню, которое выглядит следующим образом:

ГЛАВНАЯ |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

Ответы [ 4 ]

4 голосов
/ 11 августа 2010

Там может быть более чистый способ сделать это. После того, как вы объявили 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")),
  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, вы также можете называть каждый пункт меню по имени. Это было бы больше Лифт-иск. 

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

Затем можно добавить любой стиль, который вы хотите, во внешнем файле таблицы стилей или внутри страницы.

3 голосов
/ 06 апреля 2010

Чтобы избавиться от последней строки, вы можете использовать псевдокласс: last-child: 

ul.menu li:last-child {
  border: none;
}
1 голос
/ 11 мая 2011

Найдя другие ответы неудовлетворительно, я нашел собственное решение ...

(Обратите внимание, что я новичок в 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>
1 голос
/ 18 марта 2010

Возможно, вы захотите сделать так, чтобы элементы <li> имели встроенный блок display.

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

Таким образом, они будут вести себя гораздо больше, как блочные элементы, и могут синхронизироваться со ссылками.Кроме того, вы можете попробовать поиграть со свойством line-height вместо добавления вертикального заполнения, так как высота строки будет более точно центрировать текст по вертикали.

...