Een navigatie met mouseover effecten.

Een crossbrowsers navigatie maken is eigenlijk niet zo moeilijk als je maar rekening houd met de verschillen die er heersen. Om de gehele block te kunnen gebruiken voor de links is de breedte op auto voor de betere browsers, terwijl voor IE6 (en minder) de breedte op 100% moet worden gezet om alles naar behoren te laten werken.

De XHTML

<div id="navigatie">
<ul>
<li><a href="#">Ijsjes</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Zakdoeken</a></li>
<li><a href="#">Dildo’s</a></li>
<li><a href="#">Bruine kasten</a></li>
<li><a href="#">Ultra Edit</a></li>
<li><a href="#">Rechts</a></li>
</ul>
</div>

Zoals je ziet niks bijzonder aan de xhtml lijst, behalve de woordkeuze, om eens iets anders te doen als altijd maar lorem Ipsum.

Het stylen van de lijst.

De div die alles omvat

#navigatie {
width: 150px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #F93;
color: #333;
}

We bepalen de breedte door width: 150px en geven het een achtergrond kleur background-color: #F93 (oranje) en een zwarte boord aan de rechter kant. padding: 0 0 1em 0 Zorgt voor een spatie onderaan van 1 maal de lettergrootte font-size: 90%.

Voorbeeld nummer 1

De lijst

#navigatie ul {
list-style: none;
margin: 0;
padding: 0;
}

Met list-style: none zeggen we dat de standaard bolltjes bij een lijst weg moeten en zorgen dat de standaard marge van ongeveer 17 px weg is zetten we margin: 0 en padding: 0.

Voorbeeld nummer 2

De lijst items

#navigatie li {
border-bottom: 1px solid #F93;
margin: 0;
}

We voorzien de lijst items van een boord aan de onderkant die dezelfde kleur heeft als de achtergrond, dus nog niet veel verandering nu, maar naderhand komt het wel duidelijk.

Voorbeeld nummer 3

De links

#navigatie li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #C66300;
border-right: 10px solid #FF870F;
background-color: #EC7600;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #navigatie li a {
width: auto;
}

Hier gebeurd de eigenlijke styling, daar we hier bepalen dat de links (die een inline element zijn) nu worden weergegeven als block, hiermee kunnen we het klik-gebied aanzienlijk vergroten. De breedte van de block wordt bepaald naar 100% voor IE, en het gebruik van de child selector html>body voorziet de betere browser van dezelfde breedte.

Ook bepalen we dat er geen standaard onderlijning van de links moet gebeuren door text-decoration: none.

Voorbeeld nummer 4

De hover effecten

#navigatie li a:hover {
border-left: 10px solid #E17100;
border-right: 10px solid #FFB66C;
background-color: #FF962D;
}

Eigenlijk worden hier enkel de kleuren van de border-left,border-right en background-color verandert voor als de muis over de links gaat.

Uiteindelijk resultaat nummer 5