Het menu
Het menu (in de DIV menu) bestaat altijd uit ongenummerde lijsten (UL's) voor het hoofdmenu en alle submenu’s (al dan niet genest). Een simpel voorbeeld bestaande uit 1 hoofdmenu-item met een submenu met 1 item:
<ul id="t000000" class="topmenu"> <li><a class="current" id="topmenu1" href="/test/m000001/p000002.html"><span>Menu 1</span></a> </li> </ul> <ul id="m000001" class="submenu submenu1"> <li><a class="current" id="submenu1" href="/test/m000001/000003/p000004.html"><span>Submenu 1</span></a></li> </ul>
Bij geneste menu’s zal een submenu-item (de UL) in de LI-tag staan van het bijbehorende hoofdmenu-item.
ID's en classnames
(Bijna) elk onderdeel van het menu heeft een id en/of 1 of meerdere classnames zodat het via css mogelijk is heel gericht de opmaak van het menu te beïnvloeden.
Tip: als je wilt weten welke ID's en classnames in welke situatie beschikbaar zijn bekijk dan de broncode van de html, je ziet dan precies welke ID's en classnames gezet zijn.
Het hoofdmenu heeft als ID altijd t000000 en als classname topmenu. De menu-items van het hoofdmenu hebben als ID topmenux, waarbij x het volgnummer is van het menu-item. Dit volgnummer kun je bijvoorbeeld gebruiken om elk menu-item een andere kleur te geven.
Het huidige hoofdmenu-item (A) heeft als classname altijd current de bijbehorende LI de classname li-current.
Een sub(sub)menu heeft als classnamen sub(sub)menu en sub(sub)menux, waarbij x het volgnummer is van het sub(sub)menu-item. Het huidige sub(sub)menu-item (A) heeft als classname altijd current de bijbehorende LI de classname li-current.
Een sub(sub)menu heeft ook een uniek ID (bijv. m000001) dat echter kan veranderen. Dit ID dient dus niet gebruikt te worden in de CSS, maar kan gebruikt worden in combinatie met javascript. Elke LI en A kan namelijk als classname hetzelfde ID hebben met een p er voor, bijv. pm000001. Als bijvoorbeeld met de muis over de LI of A wordt bewogen kan het bijbehorende submenu gevonden worden op basis van de classname en getoond worden: op die manier kan een dropdown menu worden gemaakt.
De hyperlinks bevatten altijd een SPAN-tag. Deze kan in voorkomende gevallen worden gebruikt om bijvoorbeeld de tekst niet te tonen maar een afbeelding.
Het eerste en laatste menu-item van het hoofdmenu of een submenu heeft resp. de classname first en last, en de bijbehorende LI resp. li-first en li-last. Is er maar 1 menu-item dan heeft het beide classnames, dus class="first last", resp. class="li-first li-last".
Een menu-item dat verwijst naar een submenu heeft als classname hassub. Deze kan bijvoorbeeld worden gebruikt om het menu-item een andere kleur en/of achtergrondplaatje (bijv. een pijltje) mee te geven.
Voorbeelden
Afhankelijk van wat prettig is of het meest makkelijke: je kunt de onderdelen van een menu met ID's en classnames in css regels selecteren of logisch, op basis van hun relatie in de html.
Op basis van classnames een submenu een achtergrondkleur geven, bijv. bij een standaard-menu waarbij de UL's niet genest zijn:
#menu .submenu { /* selecteer elk element met de classname submenu */
background: red;
}
En op basis van de logische structuur, waarbij de UL's wel genest zijn:
#menu ul ul { /* selecteer elke UL die in een andere UL staat */
background: red;
}
'Nadeel' van dit laatste voorbeeld is dat ook subsubmenu's die kleur krijgen, want zij staan eventueel weer in de UL van het submenu. Wil je de subsubmenu's juist weer een andere kleur meegeven, dan moet dat expliciet worden aangegeven:
#menu ul ul ul {
background: green;
}