Pulldown-menu
Het pulldown-menu bestaat uit geneste ongenummerde lijsten (UL's) van alle menu-items. 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>
</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.
Vereisten
Om het pulldown-menu werkend te maken is wat javascript en css vereist.
Vereiste javascript
Om een pulldown-menu werkend te maken is javascript vereist. Deze javascript wordt door het cms zelf ingevoegd als een pulldown-menu is gewenst. Er is slechts 1 instelling die zelf in de html moet worden ingevoegd, en dat is de richting waarin het menu uit zal klappen (van boven naar beneden of van links naar rechts.) Het invoegen van deze instelling (vet weergegeven) gebeurd als volgt:
<script type="text/javascript"> /* verplicht */ menuPulldownDirection = '<!-- TMPL_VAR NAME="xcmsPulldownDirection" -->'; /* optioneel */ menuCurrentTopBgColor = 'white'; /* achtergrondkleur van hoofdmenu-item on hover */ menuCurrentTopColor = 'black'; /* tekstkleur van hoofdmenu-item on hover */ menuClearTopBgColor = 'black'; /* normale achtergrondkleur hoofdmenu-item */ menuClearTopColor = 'white'; /* normale tekstkleur van hoofdmenu-item */ menuCurrentBgColor = 'white'; /* achtergrondkleur van submenu-item on hover */ menuCurrentColor = 'black'; /* tekstkleur van submenu-item on hover */ menuClearBgColor = 'black'; /* normale achtergrondkleur van submenu-item */ menuClearColor = 'white'; /* normale tekstkleur van submenu-item */ menuTopFix = 0; /* verticale offset als submenu getoond wordt */ menuLeftFix = 0; /* horizontale offset als submenu getoond wordt */ menuSubTopFix = 0; /* verticale offset als subsubmenu getoond wordt */ menuSubLeftFix = 0; /* horizontale offset als subsubmenu getoond wordt */ </script>
NB: Bovenstaande stukje javascript dient in de <head> van de html te staan na <!-- TMPL_VAR NAME="xcmsHead2" -->!
De overige instellingen zijn optioneel en geven het cms aan welke kleuren gebruikt dienen te worden. Het cms hilight namelijk zelf via javascript menu-items als een bezoeker er met een muis overheen beweegt. Naast in de css dienen hier dus ook de kleuren van menu-items opgegeven te worden.
Daarnaast kan voor een submenu en subsubmenu een offset worden opgegeven om eventueel voorkomende verschillen in weergave te corrigeren. Soms (afhankelijk van browser en/of css) wil een submenu zich wel eens een pixel of 2 'verkeerd' tonen ten opzichte van het hoofdmenu. Geef waar nodig de gewenste offset (positieve of negatieve) op. Indien nodig kan eenvoudig een verschil worden gemaakt tussen IE en FF door de javascript variabele isIE te gebruiken. Moet een offset bijvoorbeeld alleen voor IE gelden, zeg dan
if (isIE) menuSubTopFix = -2;
Instellingen in apart javascript bestand
Het is netjes (en makkelijk om snel wijzigingen door te voeren aan de javascript zonder de hele website moeten publiceren) om javascript los van het html bestand op te nemen en de javascript via een link op te nemen in de html, bijvoorbeeld:
<head> ... <script type="text/javascript" src="/css/mijnstijl/menu.js"></script> ... </head>
De instellingen voor het pulldown-menu kunnen dan in dit bestand worden gezet (zonder de <script>-tags!) De variabele menuPullDownDirection moet dan 'hard' worden voorgeprogrammeerd:
menuPullDownDirection = 'topbottom'; /* als menu van boven naar beneden moet uitklappen */ menuPullDownDirection = 'leftright'; /* als menu van links naar rechts moet uitklappen */
Vereiste css
Naast de vereiste javascript is de volgende css regel nodig om te voorkomen dat alle submenu's direct zichtbaar zijn en absoluut gepositioneerd kunnen worden. De submenu's moeten immers recht onder een menu-item verschijnen en pas dan als de gebruiker met zijn muis over een bijbehorend menu-item gaat.
De eenvoudige css regels zijn
#menu {
position: relative; /* zodat de positionering vanaf de div met het menu berekend wordt */
}
#menu ul ul {
display: none; /* verberg alle sub- en subsubmenu's */
position: absolute; /* zorgt er voor dat sub(sub)menu's vrij gepositioneerd kunnen worden */
}
Zelf de pulldown via javascript regelen
Het kan eventueel zijn dat de javascript van het cms niet voldoet aan de eisen voor de vormgeving die gerealiseerd moet worden. Heb je voldoende ervaring en kennis van javascript, dan kun je natuurlijk ook eigen javascript of javascript van derden inzetten. Let wel: de html structuur van het menu staat vast, dus je zult eventueel javascript van derden moeten aanpassen om deze te laten samenwerken.
De javascript voor het menu wordt door het cms geïnitialiseerd via
AddToInitArray(InitMenu);
De functie InitMenu kan worden overruled door deze in eigen javascript nogmaals te definiëren en daar eigen (initialisatie) code in te zetten, bijvoorbeeld:
function InitMenu() {
aanroep_naar_init_functie_van_eigen_code();
}
Pulldown puur via css
Het is ook mogelijk een pulldown-menu te realiseren zonder gebruik van javascript, zie Genest-menu.