Een horizontaal menu, zonder tabellen

Een horizontaal menu maken, zonder tabellen te gebruiken. Voor veel mensen al gesneden koek, toch nog even de basis op een rijtje. Door gebruik te maken van een ongeordende lijst en deze horizontaal neer te zetten, krijg je prima menu’s. Wanneer je er nog een paar stijlen
op los laat kun je hiermee zeker je site verfraaien.

We gaan dus een menu maken aan de hand van een ongeordende lijst. Dat menu ziet er in html als volgt uit:

<div id="navigatie">
<ul>
	<li><a href="/">Home</a></li>
	<li><a href="/">Over ons</a></li>
	<li><a href="/">Archief</a></li>
	<li><a href="/">Forum</a></li>
	<li><a href="/">Winkel</a></li>
	<li><a href="/">Contact</a></li>
</ul>
</div>

Dit is het resultaat:

• Home
• Over ons
• Archief
• Forum
• Winkel
• Contact

Zoals je ziet verschijnt er een verticaal menu.
We hebben het menu de unieke naam ‘navigatie’ gegeven, met behulp van ‘id’. Deze unieke naam mag dus maar een keer worden gebruikt op je website.

We gaan nu het stijlblad toevoegen.

#navigatie {
text-align: center;
}
#navigatie ul{
background-color: #F60;
border: 1px solid black;
width: 100%;
padding: 0;
margin: 0;
white-space: no-wrap;
}
#navigatie ul li{
display: inline;
}
#navigatie ul li a{
padding-left: 1em;
padding-right: 1em;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: white;
}
#navigatie ul li a:hover{
color: #999999;
}

Even een toelichting. Het meeste wordt gebruikt om het menu te verfraaien. Twee regels moet je even aandacht geven; ‘white-space: no-wrap;' zorgt ervoor dat je menu niet ineens over meerdere regels komt te staan en daarmee je lay-out ineens verpest.

‘display: inline;‘ zorgt ervoor dat het menu horizontaal verschijnt. Deze twee vormen de basis. De rest kun je aanpassen naar wens.