You may want to put some text here

Verticaal CSS menu maken met rollover effect

Bij het maken van een website zal je vroeg of laat gebruik willen gaan maken van een menu met wat rollover effecten om het allemaal wat mooier te maken. Veel webdevelopers denken nog altijd dat je voor zoiets te maken gebruik moet maken van javascript maar niets is minder waar. Vandaag de dag kan je zo’n menu volledig opbouwen met CSS en XHTML. Je kan ook afbeeldingen gaan gebruiken maar dat is vaak niet eens nodig.

Het voordeel van zulke menu’s is accessibility (toegankelijkheid van de site), beter voor zoekmachines en het laad sneller. Zoals je ziet zijn er niets anders als voordelen aan CSS menu’s. Als laatste voordeel zou ik ook nog willen vernoemen: als je een link wil toevoegen aan je menu dan is dit in 5 seconden klaar terwijl als je met afbeelding als knoppen zou werken dit al snel 10 tot 15 minuten werk zou vragen.

Hieronder kan je een voorbeeld zien van het menu dat je gaat maken. Als je op de afbeelding klikt kan je een werkend voorbeeld bekijken.

Voorbeeld van een verticaal menu met CSS en ul element

Eerst zal ik het CSS gedeelte tonen:

CSS

body, td, th {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

}

#navigation {

width: 200px;

}

#navigation ul {

margin: 0px;

padding: 0px;

}

#navigation li {

list-style-type: none;

margin-bottom: 2px;

}

#navigation li a:link, #navigation li a:active, #navigation li a:visited {

width: 190px;

height: 18px;

padding: 2px 0px 0px 10px;

background-color: #B9E3FF;

border: 1px solid #8CD1FF;

color: #0099CC;

display: block;

text-decoration: none;

}

#navigation li a:hover {

background-color: #22A7FF;

color: #D2F4FF;

}

De margins en paddings van het ul element zetten we op 0px zodat er zeker geen witruimte meer is tussen het ul element en de navigation div en het ul element en de li elementen.

Bij het li element zetten we de list-style op geen zodat er geen bolletjes meer gezet worden voor elk list item. Vervolgens zetten we ook de margin-bottom op 2 px. Dit gaat ervoor zorgen dat er tussen elke knop 2px spatie is.

Bij de styling van a:link, a:active en a:visited zijn de belangrijkste instellingen de display block en de text-decoration. De display block zorgt ervoor dat het a element een block-level element wordt. Normaal gezien is dit een inline element. Een inline element wil zeggen dat deze naast elkaar komen te staan . Het is ook zo dat je aan een inline element geen hoogte en breedte kunt meegeven. Een block-level element daarentegen komen automatisch onderelkaar te staan en hier kan je wel een hoogte en een breedte aan meegeven, en dat is ook wat je wilt hebben bij dit menu. Als tweede belangrijke instellingen is er de text-decoration die je op none moet zetten. Dit zorgt ervoor dat de standaard style van de link zoals de onderlijning weggelaten wordt. De rest van de instellingen die gedaan worden zijn uitsluitend voor het veranderen van de look van de knop, dus hier kan je zelf wat mee spelen.

Als laatste geven we nog een stijl mee aan a:hover. Dit gaat zorgen voor het rollover effect dat je vroeger altijd met javascript moest maken. De twee instellingen die daar gemaakt zijn zijn puur voor het uitzicht dus hier kan en mag je zelf ook vanalles aan veranderen.

Als laatste moet je nog het XHTML gedeelte gaan aanmaken dat er als volgt uitziet.

XHTML

<div id="navigation">

<ul>

<li><a href="http://www.computerfaq.be" title="Home pagina">Home</a></li>

<li><a href="http://www.computerfaq.be" title="Tutorials pagina">Tutorials</a></li>

<li><a href="http://www.computerfaq.be" title="Informatie pagina">Informatie</a></li>

<li><a href="http://www.computerfaq.be" title="Contact pagina">Contact</a></li>

</ul>

</div>

Hier moet ik denk ik niet veel uitleg bijgeven aangezien dat dit wat basis XHTML is. Wil je nu bijvoorbeeld een extra link toevoegen aan je menu. Dan voeg je een li element toe aan tussen de ul tags en klaar.

<div id="navigation">

<ul>
<li><a href="http://www.computerfaq.be" title="Home pagina">Home</a></li>
<li><a href="http://www.computerfaq.be" title="Tutorials pagina">Tutorials</a></li>
<li><a href="http://www.computerfaq.be" title="Informatie pagina">Informatie</a></li>
<li><a href="http://www.computerfaq.be" title="Contact pagina">Contact</a></li>
<li><a href="http://www.computerfaq.be" title="Extra pagina">Extra knop</a></li>
</ul>
</div>

Als laatste heb ik nog enkele voorbeelden gemaakt van verticale CSS menu’s zoals hierboven beschreven maar inplaats van een achtergrondkleur te gebruiken heb ik hier een afbeelding gebruikt als achtergrond om wat professioneler oogende menu’s te maken. Om een voorbeeld te bekijken van deze menu’s kan je op de afbeelding klikken.

CSS menu met als achtergrond een afbeelding

Wat belangrijk om weten is dat de afbeelding die we gebruiken bij zo’n menu’s zowel voor het niet rollover als het rollover gedeelte dezelfde afbeelding is. Je moet in je CSS dan zo instellen dat bij een niet rollover de bovenkant van de afbeelding getoond wordt en bij een rollover de onderkant van de afbeelding getoond wordt. Maak je dus een knop van 22px hoog dan maak je in je teken programma een afbeelding van 44px hoog en een 50 px breed( breedte mag je zelf kiezen). Op het bovenste 22 pixels teken je dan de gewone achtergrond van je knoppen en op de onderste 22pixels teken je de rolloverachtergrond van je knoppen.
Het voornaamste wat je voor CSS menu’s met afbeeldingen moet veranderen aan de CSS is dat je inplaats van een achtergrondkleur een achtergrondafbeelding gebruikt. Stel ook in dat de afbeelding over de x-as herhaald wordt. Bij de rollover stel je ook in de de afbeelding in ons geval met een knop van 22 pixels hoog, de afbeelding -22 pixels moet verschoven worden. Dit doe ja als volgt.

#navigation2  li a:hover {

background-color: #22A7FF;
color: #F2FCFF;
background-position: 0px -22px;
}

Als je het nog niet goed snapt kan je altijd de code eens bekijken van vertical CSS menu’s met afbeeldingen.

The Author of this post is Wim Mostmans

Wim Mostmans heeft een eigen webontwikkeling bedrijf Sitebase waar hij voltijds voor werkt. Hij beheert ook nog enkele websites waaronder deze en een Computerforum. Blijf op de hoogte van waar Wim mee bezig is door hem te volgen op Twitter.

4 Responses »

  1. Hoe kan ik een nagivatie maken dat als ik hover dat er een geordende lijst beneden staat Voorbeeld in de nagivatie staat Tips als hyperlink als ga ik er over heen met mijn muis moet er kooktips tuintips enz, onderstaan. net als hier boven op deze website al hover je software geek bussines zulk effect hoe maak ik dat ?

  2. Bedankt voor het delen, was hier al even naar op zoek!

  3. Beste Wim,

    Dank je wel voor je duidelijke uitleg. Ik heb dit menu gebruikt voor een klant van mij en we zijn er zeer tevreden over 😉

    Groetjes Michele

Leave a Comment