css drop down / uitklapmenu

[jeel2008]

is een css drop down menu, of uitklapmenu, mogelijk?
ik geloof best dat er met a:hover mooie effecten te krijgen zijn, maar is het ook mogelijk een menu naar beneden te laten klappen (zoals hier: http://www.mrwcdieleman.nl/index.html. maar eigenlijk wil ik javascript helemaal vermijden, daarom vroeg ik me af of zo'n uitklapmenu ook geheel met css te verwezenlijken is, zodat de site lekker licht blijft).

 

[Laurens1]

Zoiets? Demo
Hoe? Klik

 

[csshunter]

Suckerfish dropdowns

Yeps, de genoemde demo werkt bij echte browsers en bij Internet Explorer 7 en hoger.

Wil je ook IE6 bedienen, dan is wel een brokje javascript nodig - alleen niet een hele bieb-toestand van jQuery of het SpryMenu, maar slechts een paar regeltjes:
[JS]<script type="text/javascript">
<!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>[/JS]
Verder moeten er ook wat extra dingetjes in de css staan.

Toelichting
Dit sfHover script plaatst bij hoveren over een list-item voor Internet Explorer even vlug een speciale class op dat element. Die extra class krijgt dezelfde styles die normaal met li:hover worden gemaakt. Zodra je weghovert van het item, wordt die speciale IE-class weer opgeheven, en komt de normale toestand weer terug.

Het "sf" komt van SuckerFish, naar de naam van het beroemde voorbeeld waarmee deze css-hovers gemaakt worden: het "Suckerfish Dropdowns" artikel in A List Apart.

• Een toegepast voorbeeld: http://home.tiscali.nl/developerscorner/css-discuss/the_Keyboardfish.htm.
• Eén van de "Zonen van de Zuigvis"-artikelen, met uitgebreide beschrijving:
  www.htmldog.com/articles/suckerfish/dropdowns/.

Met vriendelijke groet,
CSShunter

O ja, een alternatief is het WhateverHover htc-script, dat serverside werkt en geen javascript van de bezoeker nodig heeft. Ook mooi!

 

[jeel2008]

hallo laurens1 en csshunter
bedankt, en helemaal wat ik bedoel
zat te klooien met spry in dreamweaver, maar als het zo kan, zonder javascript (of een heel klein beetje speciaal voor IE6), lijkt me dat de site sneller maken.