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>

bekijk het resultaat

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!

naar het begin van de pagina