In je navigatiestructuur zitten vaak meerdere niveau's. Om bij een pagina te komen moet de gebruiker eerst een paar submenu's hebben gekozen. Een mooie manier om dit weer te geven is met een dropdown menu. De gebruiker kan dan met de muis boven een categorie hangen en dan verschijnt er vanzelf een submenu waarin de gebruiker verder kan navigeren.
Een menu kunnen we opbouwen uit lijsten. Elk menu is een lijst en elk menu item is een lijst item. Submenu's staan op dezelfde manier dan weer binnen deze lijst items.
Dat komt er dan bijvoorbeeld zoals hieronder uit te zien. Let goed op hoe de <li> open en sluit tags geplaatst zijn.
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Webdesign
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles</li>
<li>Inspiration</li>
</ul>
Dit kan je uiteraard nog mooier maken met CSS, maar dat mag jij zelf doen!
Als we willen dat alleen de submenu's getoond moeten worden als je met de muis er overheen beweegt moeten we twee CSS regels toevoegen. In onderstaande code zie je welke twee.
/* Alle submenu's zijn niet zichtbaar */
li > ul {
display: none;
}
/* Alle submenu's waar over gehoverd wordt zijn wel zichtbaar */
li:hover > ul {
display: block;
}
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Webdesign
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles</li>
<li>Inspiration</li>
</ul>
Ga met de muis over de items om de verschillende submenu's te zien.
De eerste css regel zegt dat alle submenu's normaal niet zichtbaar zijn. li > ul zijn alle menu's die binnen een li zitten (dat zijn dus alle submenu's, maar niet het hoofdmenu!). Deze hebben de regel display: none wat betekent dat ze niet worden weergegeven. Alsof ze helemaal niet in de HTML aanwezig zijn.
De volgende regel zegt iets over li:hover > ul. Dit zijn weer alle submenu's, maar dit keer alleen de submenu's die in een menu item zitten waar de muis boven zweeft (:hover). Over deze elementen wordt gezegd dat ze display: block hebben, wat betekent dat ze juist wel zichtbaar zijn. Deze regel is iets specifieker. Dus hoewel op submenu's beide regels van toepassing kunnen zijn (maak onzichtbaar, maak zichtbaar), wint deze het van de vorige regel.