Horizontaal is passé

De meest gebruikte manier om navigaties te maken is de horizontale manier, of de vertikale-horizontale manier - je weet wel, de links gewoon onder elkaar - maar bijna nooit kom je vertikale navigaties tegen.

Laten we eens proberen zoiets te doen

Zoals je je wel kunt voorstellen is dit niet meer mogelijk met tekst, er zullen dus afbeeldingen moeten worden gebruikt. Voor diegenen die het zo belangrijk vinden dat hun key-words in hun links verloren gaan, geen probleem, ik heb eraan gedacht.

Als je eens even snel wilt zien wat we gaan maken.

De XHTML is niet veel

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Homepage</title>
</head>
<body>
<div id="nav">
<ul>
<li id="n1"><a href="#" title="startpagina">Home</a></li>
<li id="n2"><a href="#" title="Layouts voor de grabbel">Layouts</a></li>
<li id="n3"><a href="#" title="Webdesign">Designs</a></li>
<li id="n4"><a href="#" title="Free Templates">Templates</a></li>
<li id="n5"><a href="#" title="Contact Information">Contact</a></li>
</ul>
</div>
</body>
</html>

De gebruikelijke rest van de code zal wel geen probleem vormen om dit eens zelf erbij te zetten hé ?

Maar de CSS is wel een hele boel

De navigatie-div

#nav {
width: 748px;
background-color : #FFEFBF;
border: 1px solid #333;
overflow : hidden ; /* om inhoud te tonen in FireFox */
}

De eerste 3 bepaligen zijn puur omwile van het uitzicht, belangrijk is regel #4, zonder deze bepaling zal je in FireFox geen achtergrondkleur hebben.

De navigatie ul

#nav ul {
list-style-type : none;
float : right;
display: inline; /* puur voor IE6 double-margin-bug */
margin : 0 25px 0 0;
}

Met list-style-type : none zorgen we eerst eens dat de standaard bolletjes weg zijn, om dan het geheel naar rechts te brengen/uit te lijnen met float : right. display: inline Is enkel daarvoor aanwezig omdat anders de IE-double-margin-bug zijn intrede zal doen. We geven het geheel nog een spatie van 25px aan de rechter kant.

De lijst-items li

#nav li {
display : inline;
height : 140px;
}

Met display : inline bepalen we dat lijst-items die normaal gezien block-elementen zijn - daarom staan ze ook altijd onder elkaar - nu worden omgezet naar inline-elementen, dus op een lijn worden getoond. We geven nog de hoogte mee van 140px die elke <li> moet hebben.

De links

#nav li a {
display : block;
float : left;
margin : 0 2px 0 0;
width : 37px;
height : 125px;
text-indent : -9000px;
/* IE 5 Hack \*/
overflow : hidden ;
/* end hack */
text-decoration : none;
border-bottom : 20px solid #ecbb28;
border-top: 5px solid #96781f;
}

Normaal gezien is een link enkel de tekst die je aanklikt, met display : block; veranderen we dit door de gehele afmeting als link te laten fungeren, dus 37px breed en 125px hoog. Met float : left zetten we elke link naast elkaar met een marge van 2px aan de rechter kant. Daar we gebruik zullen maken van afbeeldingen moet de tekst weg, daarvoor zorgt text-indent : -9000px, dus de link tekst wordt 9000px opgeschoven.

Om ervoor te zorgen dat het ook werkt met IE 5.x voegen we een specifieke IE 5.x hack toe.

Daar er geen tekst is moet er ook geen standaard onderlijning van de links komen, dus: text-decoration : none, en dan nog een beetje styling voor de boorden.

De afbeeldingen bepalen

#nav li#n1 a { background : #fff url(n1.gif) no-repeat; }
#nav li#n2 a { background : #fff url(n2.gif) no-repeat; }
#nav li#n3 a { background : #fff url(n3.gif) no-repeat; }
#nav li#n4 a { background : #fff url(n4.gif) no-repeat; }
#nav li#n5 a { background : #fff url(n5.gif) no-repeat; }
#nav li#n1 a:hover { background : #fff url(n1.gif) no-repeat 0 5px; }
#nav li#n2 a:hover { background : #fff url(n2.gif) no-repeat 0 5px; }
#nav li#n3 a:hover { background : #fff url(/n3.gif) no-repeat 0 5px; }
#nav li#n4 a:hover { background : #fff url(n4.gif) no-repeat 0 5px; }
#nav li#n5 a:hover { background : #fff url(n5.gif) no-repeat 0 5px; }

Voor elke link is er een aparte ID, dus kunnen we voor elke link een andere afbeelding bepalen.

#nav li a:hover {
height : 135px ;
border-bottom : 10px solid #96781f;
border-top : 5px solid #ecbb28;
}

Nog een beetje styling met de boorden en klaar.

Internet Explorer 6 hack

De opgegeven hoogtes van de links werken niet met IE6, dus moet er extra code worden toegevoegd die enkel door IE6 kan worden gelezen:

* html #nav li a { height: 140px; }
* html #nav li a:hover { height: 140px; }

Voorbeeld

Hier op deze pagina kan je het resultaat zien, voor de gebruikte code bekijk je het best de code in het voorbeeld.