[CSS] Tabmenu (mbv. nested list) laten "terugspringen"

[Reveller]

Ik probeer een 2-laags tabmenu te maken mbv nested lists. De werking moet als volgt zijn:

• standaard zie je 3 tabjes (Groenten, Fruit en Vlees). Afhankelijk van waar op de site je je bevindt, is een submenu standaard uitgeklapt
• als je over een van de andere tabjes hovert, verschijnt een ander submenu
• als de cursor niet meer over het submenu hovert schiet het menu terug in de oorspronkelijke staat

Stel dus dat ik op de pagina Fruit > Kersen ben. Dan moet het menu er als volgt uit zien ([] betekent: item heeft als class "active"):

code:

Groenten [Fruit] Vlees
Aardbeien [Kersen] Peren

Als ik dan over Groenten hover met de de muis, krijg je dit:

code:

Groenten Fruit Vlees
Bloemkool Spruitjes

En als je over Vlees heen hovert natuurlijk het submenu van vlees. Als ik de cursor van het menu afhaal, moet het menu terugschieten in de oorspronkelijke staat:

code:

Groenten [Fruit] Vlees
Aardbeien [Kersen] Peren

Tweede voorbeeld: stel dat we op de hoofdpagina "Vlees" zitten, dan ziet het standaard menu er als volgt uit:

code:

Groenten Fruit [Vlees]
Koe Lam

Na een hoop geGoogle heb ik van een unordered nested list een tabmenu met subnavigatie weten te maken, en als je over een tabje hovert verschijnt het submenu. Wat ik echter niet voor elkaar krijg is:

Hoe vind ik (evt mbv wat javascript?) uit welk submenu ik standaard moet laten zien en hoe zorg ik ervoor dat deze verdwijnt als ik over een ander tabje hover en dat deze "terugspringt" als ik van het menu afga met mijn cursor?

Cascading Stylesheet:

#menu {
  margin: 0;
  padding: 0;
}

a.active {
  font-weight: bold;
}

#menu li {
  float: left;
  text-align: center;
  list-style-type: none;
  padding: 0 10px 0 0;
}

#menu li a {
  display: block;
  float: left;
}

#menu li ul {
  position: absolute;
  padding: 10px 0 0 10px;
  left: -9000px;
  margin-top: 15px;
}

#menu li ul li {
  padding:0 10px 0 0;
}

#menu li ul li a {
  color:#666;
}

#menu li:hover ul {
  left: 0;
}

HTML:

<div id="menu">
  <ul id="menu">
    <li><a href="">Groenten</a>
      <ul>
        <li><a href="">Bloemkool</a><li>
        <li><a href="">Spruitjes</a></li>
      </ul>
    </li>
    <li><a href="" class="active">Fruit</a>
      <ul>
        <li><a href="">Aardbeien</a></i>
        <li ><a href="" class="active">Kersen</a></li>
        <li><a href="">Peren</a></li>
      </ul>
    </li>
    <li><a href="">Vlees</a>
      <ul>
        <li><a href="">Koe</a></i>
        <li><a href="">Lam</a></li>
      </ul>
    </li>
  </ul>
</div>

[ Voor 3% gewijzigd door Reveller op 22-07-2007 21:25 ]

[crisp]

Welk submenu je standaard laat zien zal je serverside moeten bepalen en dan de betreffende list-item bijvoorbeeld een class 'active' geven. Je CSS kan er dan vwb het second-level menu zo uitzien:

Cascading Stylesheet:

#menu li.active ul {
  left: 0;
}
#menu li:hover ul {
  left: 0;
  z-index: 10;
}

door de z-index bij :hover zal je hovermenu over het active menu getoond worden.

Overigens ben ik geen fan van hovermenu's; dat is imo behavior en hoort in script thuis. Je kan dan zoals wij ook doen op de frontpage vertragingen inbouwen.

[Fuzzillogic]

crisp schreef op zondag 22 juli 2007 @ 23:45:
Overigens ben ik geen fan van hovermenu's; dat is imo behavior en hoort in script thuis. Je kan dan zoals wij ook doen op de frontpage vertragingen inbouwen.

Imo is de combinatie het beste. Je kunt met javascript heel eenvoudig een 'override' doen op een CSS-menu. Voordeel is dat het dan ook zonder JS werkt. Op de t.net frontpage is dat niet het geval.

[crisp]

Fuzzillogic schreef op maandag 23 juli 2007 @ 00:02:
[...]

Imo is de combinatie het beste. Je kunt met javascript heel eenvoudig een 'override' doen op een CSS-menu. Voordeel is dat het dan ook zonder JS werkt. Op de t.net frontpage is dat niet het geval.

De markup van de t.net frontpage leent zich niet voor een css-oplossing in deze, de non-JS fallback bestaat uit het feit dat je via de 1st-level navigatie ook altijd bij de 2nd-level navigatie kan komen (1 extra click).

[Reveller]

crisp schreef op maandag 23 juli 2007 @ 00:21:
[...] De markup van de t.net frontpage leent zich niet voor een css-oplossing in deze [...]

Crisp, ten eerste bedankt voor je oplossing voor mijn probleem. Ik ga er meteen mee aan de slag Waarom leent de markup van de frontpage zich niet voor een dergelijke oplossing?

[crisp]

Reveller schreef op maandag 23 juli 2007 @ 00:35:
[...]
Waarom leent de markup van de frontpage zich niet voor een dergelijke oplossing?

Omdat het geen nested list is

Ik ben daar toen om een of andere reden vanaf gestapt, de precieze reden weet ik echter niet meer. Het was misschien wel mogelijk geweest met een nested list maar ik denk dat dat te complex werd ofzo...

[Reveller]

Ik kom er niet uit. Ik probeer de tabjes nu te stylen, maar heb hiermee een aantal problemen. Ik wil graag dat het er zo uit ziet:



Echter, het resultaat van de code hieronder is dit:



De problemen:

• ik geef #menu een background-color: lime; mee en verwachtte dat #menu de geneste list zou omvatten en dus de tabjes en subnav een lime achtergrond kleur zouden krijgen. De padding-bottom staat op 10px dus ook aan de onderkant zou nog 10 pixels lime moeten zijn. Waarom is dit niet zo?
• met #menu ul li spreek ik de subnav li's aan en kan ze geel kleuren. Ik wil echter de tabjes geel maken, maar met #menu li maak ik alle li's (tabjes en subnav) geel. Hoe spreek ik alleen de tabjes li's aan?

Cascading Stylesheet:

#wrap {
  position: absolute;
  width: 400px;
  height: 200px;
  background-color: #ccc;
  left: 50px;
}

#menu {
  margin: 0;
  padding: 0 0 10px 0;
  width: 100%;
  background-color: lime;
}

a.active {
  font-weight: bold;
}

#menu li {
  float: left;
  text-align: center;
  list-style-type: none;
  padding: 0 10px 0 0;
}

#menu li a {
  display: block;
  float: left;
}

#menu ul li {
  background-color: yellow;
}

#menu li ul {
  position: absolute;
  padding: 0;
  left: -9000px;
  margin-top: 20px;
  width: 100%;
  background-color:red;
}

#menu li ul li {
  padding:0 10px 0 0;
}

#menu li ul li a {
  color:#666;
}

#menu li:hover ul {
  left: 0;
  z-index: 10;
  background-color: lime;
  width: 60%;
}

#menu li.active ul {
  left: 0;
}

HTML:

<div id="wrap">
  <ul id="menu">
    <li><a href="">Groenten</a>
      <ul>
        <li><a href="">Bloemkool</a><li>
        <li><a href="">Spruitjes</a></li>
      </ul>
    </li>
    <li class="active"><a href="" class="active">Fruit</a>
      <ul>
        <li><a href="">Aardbeien</a></i>
        <li ><a href="" class="active">Kersen</a></li>
        <li><a href="">Peren</a></li>
      </ul>
    </li>
    <li><a href="">Vlees</a>
      <ul>
        <li><a href="">Koe</a></i>
        <li><a href="">Lam</a></li>
      </ul>
    </li>
  </ul>
</div>

[Verwijderd]

Waarom maak je niet twee aparte lists? Dat is veel makkelijker te stylen dan een nested list...

[ Voor 121% gewijzigd door Verwijderd op 24-07-2007 15:19 ]

[moozzuzz]

Ik denk dat je #menu en #menu li relatief moet maken, voor zover dat geen slechte invloed heeft op de rest van je gewenste effect. (Spijtig genoeg doet IE en FF vaak net iets anders met lijsten).

[Reveller]

@Plaksel - ik wil een nested list
@moozzuzz - nee, dat levert helemaal een verkeerd resultaat op:



Heeft iemand een ander idee?

[ Voor 10% gewijzigd door Reveller op 25-07-2007 09:58 ]

[Fuzzillogic]

Probeer het eerst eens met CSS2 selectors goed te krijgen. Door #menu > li te gebruiken ipv #menu li voorkom je iig al dat er CSS ongewenste 'doorsijpelt' naar de onderliggende menulaag.
Als dat werkt, dan include je gewoon Dean Edwards' IE7 script en ben je klaar

[crisp]

Fuzzillogic schreef op woensdag 25 juli 2007 @ 11:17:... dan include je gewoon Dean Edwards' IE7 script en ben je klaar

Je bent daar wel fan van geloof ik?
Note dat libraries zoals IE7 een behoorlijk aanslag zijn op je footprint en je clientside performance (iig in IE < 7)...

[Fuzzillogic]

crisp schreef op woensdag 25 juli 2007 @ 12:02:
[...]

Je bent daar wel fan van geloof ik?
Note dat libraries zoals IE7 een behoorlijk aanslag zijn op je footprint en je clientside performance (iig in IE < 7)...

Ik ben bovenal GEEN fan van IE6, zoals je weet Rekening houden met die browser heeft lang genoeg geduurd, en heeft genoeg geld gekost. Time to move on.

[Reveller]

Fuzzillogic schreef op woensdag 25 juli 2007 @ 11:17:
Probeer het eerst eens met CSS2 selectors goed te krijgen. [...]
Als dat werkt, dan include je gewoon Dean Edwards' IE7 script en ben je klaar

Dank je voor het idee, ik ga het uitzoeken! Vorderingen (of niet) post ik weer hier Wat IE6 betreft ben ik het wel met fuzzyllogic eens. @crisp; zo groot is die footprint toch niet? Het bestand is slechts 40kb (uitgekleed met onnodige modules) en wordt alleen geinitieerd als de browser IE is...?

Door #menu > li te gebruiken ipv #menu li voorkom je iig al dat er CSS ongewenste 'doorsijpelt' naar de onderliggende menulaag.

[edit] Dat maakt dus niet uit; het resultaat wordt er nog "lelijker" door...?

[ Voor 24% gewijzigd door Reveller op 25-07-2007 13:32 ]

[Fuzzillogic]

Waarschijnlijk doelt Crisp op de memory-footprint. Het script goochelt behoorlijk, en dat zal vast wel een slok geheugen vergen.