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:

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.

html en css voor beginnersWil jij ook leren hoe je je eigen website kunt maken?

Wil jij tips en tricks om zo goed mogelijk zelf met alles aan de slag te kunnen?
Meld je hieronder aan voor de HTML-site nieuwsbrief en krijg elke week handige tips om een website te bouwen.
En je ontvangt meteen mijn GRATIS ebook HTML & CSS voor Beginners.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.