Genest menu
Een genest bestaat uit geneste ongenummerde lijsten (UL's) van alle of alleen de huidige submenu-items (afhankelijk van de configuratie van de stijl.) Elk submenu van een hoofdmenu staat in de LI en elk subsubmenu staat in de LI van het submenu-item. Op die manier hangt elk (sub)menu-item logisch onder het menu-item waar het bij hoort. Zonder enige opmaak zou het menu er uitzien als een sitemap.
Een simpel voorbeeld bestaande uit een hoofdmenu-item met een submenu:
<div id="menu">
<ul id="t000000" class="topmenu">
<li class="li-first"><a class="topmenu1 first" id="pm000873" href="/test/p000001"><span>Hoofdmenu</span></a>
<ul id="m000873" class="submenu submenu1">
<li class="li-first"><a class="submenu1 first" href="/test/m000873/p000002"><span>Submenu</span></a></li>
<li><a class="submenu2" href="/test/m000873/p000004"><span>Submenu</span></a></li>
</ul>
</li>
</ul>
</div>
Voor een complete 'weergave' van de structuur, ID's en classnames: stel het pulldown-menu in voor de vormgeving en bekijk de broncode in het cms in de verschillende situaties.
Een genest menu biedt de meeste mogelijkheden qua vormgeving. Via javascript of pure css (zie hieronder) kan er een pulldown-menu van worden gemaakt of varianten daarvan: bijvoorbeeld het hoofdmenu en submenu vast en en alleen het subsubmenu als pulldown. Via absolute positionering kunnen sub- en subsubmenu items naar wens op de pagina worden geplaatst, etc. En door te kiezen om alleen huidige submenu's te tonen eenvoudig een uitklapmenu worden gemaakt waarbij automatisch alleen het huidige menu wordt getoond.
Pulldown-menu via css
De geneste structuur waarbij alle submenu's worden getoond leent zich uitstekend om een pulldown-menu te maken zonder inzet van javascript. Als in de css namelijk een regels worden gedefinieerd als
#menu li ul {
display: none;
}
#menu li:hover ul {
display: block;
}
dan is een submenu initieel niet zichtbaar. Pas als de bezoeker met zijn muis over het bijbehorende menu-item gaat, pas dan wordt het submenu getoond.
Nadeel is alleen dat IE6 een :hover op een LI niet ondersteunt (IE7 en FF wel.) De ondersteuning kan wel worden toegevoegd door het bestand csshover.htc bij de bestanden van de stijl te plaatsen en deze als volgt in de <head> van de html op te nemen:
<!--[if IE]>
<style type="text/css">
body {
behavior: url("/css/mijnstijl/csshover.htc");
}
</style>
<![endif-->