Een menu met de power van Css


Er is toch niets gemakkelijker dan een <ul> lijst te “misbruiken” voor een nette navigatie te maken voor je website.
Met toevoeging van 1 enkele afbeelding geef je door middel van CSS er al een heel andere dimensie aan.

Deze tutorial toont je hoe je een gewone ongeordende lijst <ul> kunt omtoveren naar een navigatie menu, natuurlijk door toepassing van de fantastische kracht van CSS en één enkele afbeelding.

Afbeelding

Je hebt een kleine afbeelding nodig, namelijk deze >> download deze afbeelding << rechter muis, opslaan als…

XHTML

<div id="navigatie">
<ul>
<li><a href="#">Startpagina</a></li>
<li><a href="#">Vrienden</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>

Zonder enige vorm van opmaak krijg je dus een standaard lijst te zien.

CSS toepassen

Verwijderen van de standaard bolletjes.

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

list-style: none; zorgt ervoor dat de bolletjes die standaard bij een lijst zijn, niet getoond worden, padding en margin staan op 0, dus daarmee hebben we de standaard inspringing van ongeveer 17px ook reeds verwijdert. Hoe dit reeds uitziet kan je hier bekijken.

De links naast elkaar plaatsen.

#navigatie li
{
float: left;
margin: 0 0.15em;
padding: 0;
}

Met de float: left; bepalen we dat de links nu naast elkaar staan in plaats van onder elkaar, met margin: 0 0.15em; zeggen we dat er geen marge onder & boven moet zijn, en dat er een spatie links en rechts moet zijn van 0.15em. Met padding: 0; zorgen we ervoor dat er geen spaties zijn, aan geen enkele kant.
De voorlopige navigatie ziet er nu zo uit.

Opgelet: Daar we nu gebruik hebben gemaakt van float:left; moeten we het volgende onderliggende deel van de website vrij maken van deze regel door het eerst volgende element de eigenschap clear:both; mee te geven, want anders zal deze zich langs het navigatie menu plaatsen.

Vormgeving met achtergrond.

#navigatie li a:link, #navigatie li a:visited
{
background: #fff url(images/tutorials/nav.gif) repeat-x bottom left;
height: 2em;
line-height: 2em;
width: 9em;
display: block;
border: 2px solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

Background heeft wit als achtergrondkleur, een afbeelding wordt met repeat-x herhaald in de horizontale richting en wordt onder (bottom) links (left) geplaatst. De hoogte is height: 2em;, wat niet overeen komt met onze afbeelding van 19px, deze wordt namelijk uitgerokken. line-height: 2em; bepaald dat de link tekst in het midden (horizontaal gezien) geplaatst wordt.

Het belangrijke gedeelte hier is toch de width: 9em;, deze maakt namelijk de indruk dat de link over de gehele afbeelding werkt en niet alleen maar werkt als er over de linktekst gegaan wordt.

En we bepalen ook nog met display: block; dat we het ganse willen weergeven als een…hmmm…nouja…een blok. De rest legt zich zelf wel uit, niet ? Het menu heeft nu al een beetje zijn bijna uiteindelijk uitzicht verkregen.

Het laatste, maar belangrijkste gedeelte.

#navigatie
{
width:30em
}

Waarom is dit nu zo belangrijk ?
Dit is een optie, maar als je het niet zou plaatsen, dan zou, als de bezoeker om een of andere duistere reden zijn scherm kleiner maakt, de links aan de uiterst rechtse kant worden afgebroken en onder de eerste link geplaatst worden.
Zie het een beetje als tekst die te lang is en automatisch op een nieuwe regel herbegonnen wordt.

Uiteindelijke resultaat.

This article was written by Trenton Moss