Elke website bestaat minstens uit twee delen: een gedeelte met de navigatie en een gedeelte met de inhoud. Meestal is er ook nog een derde deel, namelijk de banner met de titel van de website bovenaan. De footer sluit dan het geheel af.

In dit artikel bespreken we het maken van een navigatiebalk. Je kunt een navigatiebalk maken op verschillende manieren en met verschillende vormen: met Flashknoppen, met afbeeldingen, gewone tekst,... De beste manier is echter om gebruik te maken van pure HTML, gecombineerd met CSS voor de opmaak. Afbeeldingen kunnen immers niet ingelezen worden door zoekrobots en spraakbrowsers, dus gebruiksvriendelijk is het niet.

Wanneer men vroeger een navigatiebalk ging maken, haalde men al meteen de <table>-tag naar boven. Je kon inderdaad heel makkelijk werken door elk item in een aparte tabelcel te verpakken, maar hiervoor zijn tabellen echter niet bedoeld. Wij gaan dit oplossen op een meer semantische manier, namelijk door een ongeordende lijst te gebruiken.

Navigatielijst opbouwen

Plaats elk item uit je navigatie in een lijst-item:

<ul id="navigatie">
<li><a href="/home.php">Home</a></li>
<li><a href="/forum.php">Forum</a></li>
<li><a href="/contact.php">Contact</a></li>
<li><a href="/nieuwsbrief.php">Nieuwsbrief</a></li>
</ul>

We voegen meteen een id toe aan de navigatie, zo kunnen we op een eenvoudige manier deze unieke stijl koppelen aan de opmaak. Alle codes die nu nog de revue zullen passeren, zijn CSS-codes. Je merkt meteen alweer het grote voordeel om CSS te gebruiken. Eender welke lay-out je wilt toepassen, de HTML-code blijft beperkt én ongewijzigd!

Navigatielijst opmaken

Iedereen kan nu zien dat de navigatie bestaat uit een lijst. We willen echter het effect creëren alsof de items in tabelcellen staan. Daarvoor gaan we er eerst en vooral al voor moeten zorgen dat de opsommingstekens verdwijnen. Dit doen we zo:

#navigatie li
{
/* geen opsommingsteken */
list-style-type: none;
width: 160px;
}

We hebben ook meteen de breedte opgegeven die de navigatie in beslag moet nemen. In ons voorbeeld is dat een breedte van 160 pixels.

Nu komt het moeilijkste: ervoor zorgen dat de links zich gedragen alsof ze in een tabelcel verpakt zitten. Dit kunnen we doen door aan het list-item (li) het kenmerk display de waarde block mee te geven over de volledige breedte. We geven meteen ook al een achtergrondkleur mee zodat het block-effect goed opvalt. We vergroten ook de afstand tussen de links en het blok door een padding in te stellen, zoals we die ook zouden gebruiken in een tabelcel.

#navigatie li a
{
/* van de links een block-element 
maken voor het hovereffect */
display: block;
width: 100%;
background-color: #e6f7ff;
padding: 3px;
}

Met de regel #navigatie li a passen we een stijl toe op alle links (a) die zich bevinden in een lijst-item (li) van een ongeordende lijst die de naam navigatie meegekregen heeft. We kunnen nu nog een extra effect toevoegen. Als we over een item gaan, zouden we graag hebben dat de achtergrondkleur en de tekstkleur verandert. Ook dat is geen enkel probleem dankzij a:hover.

#navigatie li a:hover
{
/* kleur voor het hovereffect */
background-color: #d9e8fa;
color: red;
}

Zo, dit was het zwaarste werk! Dat viel best mee, niet? Alles wat nu nog kan volgen, is louter bedoeld om de opmaak verder te verfraaien, hierbij kan je natuurlijk altijd je eigen fantasie laten werken!

Extra opmaak toevoegen

We willen tussen elk item een horizontale streep trekken en we verwijderen dan de onderstreping van de hyperlinks: anders wordt het een beetje teveel van het goede.

De code komt er in z'n geheel zo uit te zien:

#navigatie li a
{
/* van de links een 
block-element maken voor het hovereffect */
display: block;
background-color: #e6f7ff;
padding: 3px;
border-bottom: 1px solid #135090;
text-decoration: none;
}

De volledige code ziet er als volgt uit:

<style type="text/css">
#navigatie li
{
list-style-type: none;
width: 160px;
}
#navigatie li a
{
display: block;
width: 100%;
background-color: #e6f7ff;
padding: 3px;
border-bottom: 1px solid #135090;
text-decoration: none;
}
#navigatie li a:hover
{
background-color: #d9e8fa;
color: red;
}
</style>
<ul id="navigatie">
<li><a href="/?load=home">Home</a></li>
<li><a href="/?load=forum">Forum</a></li>
<li><a href="/?load=contact">Contact</a></li>
<li><a href="/?load=nieuwsbrief">Nieuwsbrief</a>
</li>
</ul>

Resultaat verticale navigatie

Bekijk het voorbeeld om de verticale navigatie in actie te zien.

Navigatielijst horizontaal maken

Om deze code om te vormen tot een horizontale navigatie hoef je slechts één regel code toe te voegen. Plaats in je #navigatie li de code om de lijst-items links uit te lijnen. De CSS-code van dat deel ziet er dan zo uit:

#navigatie li
{
list-style-type: none;
width: 160px;
float: left;
}

Resultaat horizontale navigatie

Bekijk het voorbeeld om de horizontale navigatie in actie te zien.