Drop-down Menu's

Iemand vroeg op een forum hoe je aan voorbeelden van drop-downmenu's kan komen. Als antwoord kreeg hij: http://www.cssplay.co.uk/menus met de opmerking: "Hoeveel wil je er?". Inderdaad is het aanbod op deze site overweldigend. Hier zal ik de html en css bespreken van een simpel basis-dropdownmenuutje.

Het Html-uitgangspunt is gewoon een geneste lijst die binnen een <div class="menu"> staat of binnen de nieuwe Html5 <nav>. Dat is heel logisch en semantisch gezien het enige correcte. Hieronder treffen we zo'n lijst aan:
Met deze knop wordt het attribuut 'class="menu"' toegevoegd aan de <div> waarbinnen de lijst zich bevindt. Daardoor wordt de Css-code opeens werkzaam en zie je meteen wat het effect daarvan is.


Het is belangrijk om even stil te staan bij de struktuur: Op het bovenste niveau hebben we een lijst van 3 elementen: groenten, fruit en granen. Ieder van deze lijstelementen bevat naast een groepsnaam ook weer een lijst. Hier zijn er 3 niveau's want de appelsoorten zijn weer een niveau dieper opgesomd. Ieder element is trouwens een link, daardoor kan je gebruik maken van de css pseudo-klasse :hover. In internet-explorer werkt die alleen op het a-element vandaar die links. Gek is dat niet want meestal bestaat een menu ook uit links omdat het je ergens naar toe stuurt.

Om hier nu een menuutje van te maken is enkel nog wat css nodig: de html is geheel klaar. Er zijn dus geen verborgen classes of id's aan de html van deze lijst toegevoegd. De enige die hiervoor gebruikt wordt is in de omhullende <div> en eventueel de class 'left' voor als het sub-submenu aan de linkerkant van het submenu weergegeven moet worden.

Besef wel dat het heel belangrijk is dat de submenu's en sub-submenu's uit elementen bestaan die deel uitmaken van het menu. Daarom blijft de 'display:block' actief zolang de cursor boven een sub of sub-submenu zweeft, immers die uitgeklapte submenu's zijn een deel van de <li> van het bovenste-level.

De CSS-code

De div die het hele menu bevat krijgt position:relative zodat er absolute elementen in geplaatst kunnen worden. De z-index voorkomt dat de uitklapmenu's achter de tekst komen. height en width zijn naar believe in te stellen. De links krijgen een passende breedte en daarom moet het display:block zijn want inline elementen hebben geen instelbare breedte.

Om onderstaand stukje CSS goed te begrijpen moet je goed inzicht hebben in de regels van overerving. Iedere eigenschap erft over op de children en als dat niet gewenst is dan moet je dat weer overrulen. De volgorde van regels is hier zeer belangrijk!!! De bovenste regels gelden grosso mode voor de parents (en worden dus door alle children overgenomen), de onderste definieren het specifieke gedrag van de children als dat afwijkt van dat van de parents.

Op http://www.cssplay.co.uk/menus/dd_valid.html staat het origineel van dit script. Daar wordt nog rekening gehouden met IE6 en daarom is er de class 'hide' aan toegevoegd die samenwerkt met een hele reeks conditional statements. Deze heb ik hier weggelaten omdat we IE6 zo langzamerhand gaan vergeten en omdat het daardoor een stuk eenvoudiger wordt.