Liftweb Přizpůsobení nabídky

hlasů
6

Chci vytvořit nabídku, která vypadá takto:

ÚVOD | FOO | BAR | O | KONTAKT

Jak bych mohl jít asi dělá?

Zde je to, co jsem se snažil:

<lift:Menu.builder ul:class=menu li_item:class=current />

a

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

To se blíží, ale nevypadá to úplně v pořádku. Také jste skončili s extra čáry na konci. Chci řádky být ve stejné výšce jako text.

http://lh5.ggpht.com/_5DxlOp9F12k/S2aFQHfupzI/AAAAAAAAJiY/Ds0IpEyu78I/s800/menu.png

Položena 01/02/2010 v 08:27
zdroj uživatelem
V jiných jazycích...                            


4 odpovědí

hlasů
4

Tam by mohl být čistší způsob, jak to udělat. Poté, co jste prohlásil URL v mapě webu, můžete do značné míry použít jako běžné odkazy v šabloně. Ty by jim napsat jako čisté HTML.

V 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: _*))

V šabloně, např 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>

Nebo jak řekl Debilski, můžete také volat každou položku menu pomocí jejich jména. Bylo by 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>

Pak můžete přidat jakýkoliv styl, který chcete v externím souboru stylů nebo uvnitř stránky.

Odpovězeno 11/08/2010 v 17:30
zdroj uživatelem

hlasů
3

Chcete-li se zbavit posledního řádku, můžete použít: poslední dítě pseudo-třída:

ul.menu li: last-child {
  border: none;
}
Odpovězeno 06/04/2010 v 12:48
zdroj uživatelem

hlasů
1

Poté, co našel další odpovědi neuspokojivé jsem zjistila, že moje vlastní řešení ...

(Všimněte si, že jsem nová zvednout a věříme menu jsou příliš složité kód ručně)

Řešení

  • Částečně využít MenuWidget (od nosnosti widgetů ), aby instalatérské umožnit Superfish menu
  • Nepoužívají MenuWidget k vykreslení menu, protože to nedělá správně
  • Použijte standardní Menu.build k vykreslení menu
  • Přidat další věci řádně ukončit ‚plovoucí‘ dopady v nabídce
  • Přidat další věci k tomu, aby se soustředil menu

Plný řešení je k dispozici na adrese: http://subversion.assembla.com/svn/freshcode_public/learn_scala/lift/src/main/scala/code/snippet/CustomMenu.scala

balíček code.snippet

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

objekt CustomMenu {

  soukromý def styleElem = {
    <Style type = "text / css">
      {Text(
      ".float-centrum-item {\ n" +
        "Vlevo: 50%; \ n" +
        "Pozice: relativní; \ n" +
        "} \ N \ n" +
        ".float-centrum-obal {\ n" +
        "Float: right; \ n" +
        "Pozice: relativní; \ n" +
        "Vlevo: -50%; \ n" +
        "} \ N \ n" +
        ".float čistý {\ n" +
        "Jasný: obě; \ n" +
        "} \ N" +
        "/ * Margin fix pro FireFox * / \ n" +
        "Ul.sf nabídky {\ n" +
        "Margin-bottom: 0 \ n" +
        "} \ N"
    )}
    </ Style>
  }

  def render (v: NodeSeq) = {
    // Potřebujete se dostat MenuWidget poskytnout instalatérské
    // nabídku sám sebou, protože činí MenuWidget nezdá dělat to správně.
    MenuWidget (List ( "No Group")) ++
      <Head>
        {StyleElem}
      </ Head> ++
      <Div class = "float-střed-obal">
          <Vlek: Menu.builder top: class = "sf nabídky float-střed-item" linkToSelf = "true" expandAll = "true" />
      </ Div> ++
      // Tento div řádně ukončí plovoucí efekty.
      <Div class = "float-clear"> </ div>
  }
}

Používání:

<Div class = "zdvih: CustomMenu"> nic </ div>
Odpovězeno 11/05/2011 v 08:16
zdroj uživatelem

hlasů
1

Možná budete chtít, aby se pokusili učinit <li>prvky mají inline-block display .

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

Tímto způsobem se chovají mnohem více jako blokových prvků a mohou synchronizovat s odkazy. Také můžete zkusit hrát s line-heightmajetkem namísto přidání vertikální padding, protože line-height se bude soustřeďovat text svisle přesnějším způsobem.

Odpovězeno 18/03/2010 v 17:30
zdroj uživatelem

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more