Een menu is een relevant onderdeel van een website. Het moet opvallen en overzichtelijk zijn zodat mensen snel kunnen vinden wat ze nodig hebben. Het is de belangrijkste manier om door een website te navigeren.
Je hebt menu’s in veel verschillende soorten en stijlen. Vaak wordt er voor een menu gebruik gemaakt van JavaScript in combinatie met een aparte stylesheet voor het menu. Wij beperken ons hier tot een menu met een enkele laag. We hebben daar alleen HTML en CSS voor nodig.
In de HTML-code voegen we een ongeordende lijst toe.
<ul id="menu">
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Archief</a></li>
<li><a href=”#”>Links</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
Op de plek van het #-teken plaats je de naam van het bestand waarnaar verwezen moet worden.
Voor home is dat bijvoorbeeld index.html.
Omdat je over het algemeen maar één menu hebt, maken we gebruik van een id in plaats van een class.
We gaan nu CSS-regels toevoegen.
Om te beginnen gaan we markeringstekens die een ongeordende lijst standaard heeft, weghalen.
De padding en margin stellen we in op 0.
#menu
{
list-style-type: none; /*Haal markeringstekens weg.*/
margin: 0; /*Geen margin.*/
padding: 0; /*Geen padding.*/
}
Vervolgens passen we de verwijzingen aan.
#menu a
{
color: #FFFFFF; /*Kleur verwijzing wordt wit.*/
text-decoration: none; /*Tekst niet onderstreept.*/
background-color: #003366; /*Achtergrondkleur blauw.*/
font-family: Arial; /*Ander lettertype.*/
}
Wat opvalt is dat er bijna niets is veranderd. Er is al helemaal niets terecht gekomen van de breedte. Verder wordt de doorzichtige 'rand' die we er nu expliciet in zetten ook niet weergegeven. Dit heeft allemaal te maken met het feit dat de a-tag een inline element is en breedte daar niet op van toepassing is. Door de declaratie display: block; toe te voegen, wordt de verwijzing behandeld als block element.
Hieronder staat de uiteindelijke CSS-code van het menu.
De afbeelding rechts is het eindresultaat