Verticaal uitklap menu
Bron: http://www.sceneone.nl/tips_tricks/verticaal_menu.php
Titel: HTML en CSS tutorials
Auteur: Wybe Weysters
Deze tutorial lijkt in veel opzichten op de tutorial over het drop down menu.
Veel van de dingen die ik daar behandeld heb, sla ik hier over.
Bij het drop down menu hebben we gezien dat door een slimme samenwerking van css en html er heel
veel mogelijk is met betrekking tot een dynamische navigatie: als je met je muis over een bepaald menu-item gaat
klapt het subemnu wat hoort bij dat menu-item uit.
We hebben ook gezien dat Internet Explorer opnieuw bewijst niet het slimste jongetje van de klas te zijn.
IE heeft een beetje hulp nodig om te begrijpen wat er aan de hand is. We doen dit met behulp van een klein stukje
javascript.
Maar dan nu verticaal.
Wat mogelijk is met een navigatie waarvan de hoofd-items horizontaal naast elkaar staan is natuurlijk ook mogelijk
met een navigatie waarvan de hoofd-items verticaal onder elkaar staan.
Dus niet een horizontaal drop-down menu, maar een .......eh.........verticaal swing open menu, zeg maar.
Laten we er maar meteen helemaal induiken ("Vooruit met de geit. je leeft maar n keer.").
Ik geef je alle code in n keer en daarna leg ik een paar opvallende zaken uit.
Eerst maar even het javascript wat Internet Explorer nodig heeft. Zijn we daar meteen vanaf.
Kijk hier voor iets meer uitleg over dit javascript.
JavaScript: <script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
En dan natuurlijk nog de css en de html (ik heb er een menu van drie niveau's van gemaakt):
CSS: #nav, #nav ul, #nav ul ul{
padding: 0;
margin: 0;
list-style: none;
background: url(none.gif) repeat 0 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
}
#nav{
width: 95px;
}
#nav li{
width: 95px;
}
#nav ul{
position: absolute;
width: 100px;
left: -1000px;
margin: -22px 0 0 95px;
font-size: 100%;
}
* html #nav ul{
margin: -23px 0 0 95px;
}
#nav li li{
width: 100px;
}
#nav ul ul{
width: 140px;
margin: -22px 0 0 100px;
font-size: 100%;
}
* html #nav ul ul{
margin: -23px 0 0 100px;
}
#nav li li li{
width: 140px;
}
#nav li:hover ul, #nav li.ie_does_hover ul{
left: auto;
}
#nav li:hover ul ul, #nav li.ie_does_hover ul ul{
left: -1000px;
}
#nav ul li:hover ul, #nav ul li.ie_does_hover ul{
left: auto;
}
#nav a {
display: block;
text-decoration: none;
padding: 2px 4px 3px 4px;
margin: 1px;
}
#nav a:link, #nav a:visited{
background: #D2D2E6;
border: 1px solid #494980;
color: #494980;
}
#nav a:hover, #nav a:active{
background: #6D6D99;
border: 1px solid #494980;
color: #FFF;
}
HTML:
<ul id="nav">
<li><a href="#">Main item 1</a>
<ul>
<li><a href="#">Sub item 1.1</a></li>
<li><a href="#">Sub item 1.2</a></li>
<li><a href="#">Sub item 1.3</a></li>
<li><a href="#">Sub item 1.4</a></li>
</ul>
</li>
<li><a href="#">Main item 2</a>
<ul>
<li><a href="#">Sub item 2.1</a></li>
<li><a href="#">Sub item 2.2</a></li>
<li><a href="#">Sub item 2.3</a>
<ul>
<li><a href="#">Sub-sub item 2.3.1</a></li>
<li><a href="#">Sub-sub item 2.3.2</a></li>
<li><a href="#">Sub-sub item 2.3.3</a></li>
<li><a href="#">Sub-sub item 2.3.4</a></li>
</ul>
</li>
<li><a href="#">Sub item 2.4</a></li>
<li><a href="#">Sub item 2.5</a></li>
</ul>
</li>
<li><a href="#">Main item 3</a>
<ul>
<li><a href="#">Sub item 3.1</a>
<ul>
<li><a href="#">Sub-sub item 3.1.1</a></li>
<li><a href="#">Sub-sub item 3.1.2</a></li>
<li><a href="#">Sub-sub item 3.1.3</a></li>
<li><a href="#">Sub-sub item 3.1.4</a></li>
<li><a href="#">Sub-sub item 3.1.5</a></li>
<li><a href="#">Sub-sub item 3.1.6</a></li>
</ul>
</li>
<li><a href="#">Sub item 3.2</a></li>
</ul>
</li>
</ul>
Een aantal opvallende zaken.
Om te beginnen is daar natuurlijk die declaratie van een background image. Het gaat om de background image 'none.gif'. Ik kan
je alvast verklappen dat die image helemaal niet bestaat. Het is weer zo'n IE dingetje.
Om de een of andere reden heeft Internet Explorer die achtergrond afbeelding nodig. Vraag me niet waarom want ik weet het ook
niet. Haal die declaratie maar eens weg en test dan je menu nog maar eens uit. Je zult zien dat het submenu en het sub-submenu
in Internet Explorer niet meer goed werken.
Dus gewoon die declaratie erin zetten. Of die achtergrond afbeelding bestaat of niet maakt niet uit........we sukkelen
met z'n allen lekker verder in de hoop dat IE uitsterft of misschien ooit een goede browser wordt.
Verder heb ik een aantal breedte maten opgegeven.
Ieder niveau heeft zijn eigen breedte. Deze breedte aanduidingen hebben we (o.a.) nodig om te kunnen bepalen waar het
volgende niveau submenu moet openen. Dus bijvoorbeeld het eerste niveau met daarin de 'main-items' heeft een breedte van
95px. Dann heeft het daarop volgende niveau, het niveau met daarin de sub-items een linker marge van 95px nodig. Op die manier
opent het niveau met daarin de sub-items op de juiste plaats.
Dan zijn er de declaraties met de negatieve waarden.
Met de declaratie 'left:-1000px' zorgen we ervoor dat de sub en sub-sub niveau's uit beeld verdwijnen. Ze komen pas tevoorschijn
'on hover'.
Met de declaratie van de top margin die -22px moet zijn zorgen we ervoor dat de sub en sub-sub niveau's op de juiste hoogte
openen. Doen we dit niet dan zullen ze altijd openen onder de li waar ze bijhoren. Op deze manier dwingen we ze te openen
op dezelfde hoogte als de li waar ze bijhoren.
Wat betreft de declaraties die beginnen met '* html', daarover kun je hier meer lezen.
Als er verder nog zaken zijn die onduidelijk zijn moet je maar eens proberen om dat wat je niet begrijpt uit de css
weg te halen en vervolgens te kijken wat er met je menu gebeurd. Dan wordt vaak snel genoeg duidelijk hoe wat werkt.
En in de tutorial over het dropdown menu staan een aantal zaken beschreven die ook van pas kunnen
komen bij dit menu.
Succes ermee!