Css image hover menu

Iets wat vele mensen willen bereiken maar wat bijna nooit helemaal lukt, is een image hover menu maken. Als dit dan lukt komt er meestal javascript bij te pas, terwijl het eigenlijk zeer eenvoudig te realiseren is met css. Om te beginnen kan je het voorbeeld hier bekijken. Hier kan je de psd file van de buttons downloaden.

1. De html

Bij dit voorbeeld nemen we een div genaamd ‘menu’ met daarin 2 links. Alles staat ook nog eens in een unordered list. De rest zie je hieronder.

<div class="menu">
<ul>
	<li class="home"><a href="http://csslabs.be">home</a></li>
	<li class="contact"><a href="http://csslabs.be/contact/">contact</a></li>
</ul>
</div>

2. De css

.menu ul {
list-style:none;
padding:0;
margin:0;
}
 
.menu ul li {
float:left;
}
 
.menu ul li a {
text-indent:-9000px;
display:block;
width:82px;
height:27px;
margin-right:1px; /* kleine ruimte tussen buttons */
}

Het stukje code van ‘menu ul’ spreekt voor zich. Float:left zorgt ervoor dat het menu horizontaal is. Als je dit weglaat staat alles gewoon onder elkaar. Text-indent:-9000px laat de tekst verdwijnen, ergens heel ver weg.

Nu zullen we de afbeeldingen als achtergrond instellen. De button en de hover-button zitten samen in één afbeelding. Dit ziet er dus als volgt uit.

.menu ul li.home a {
background:url(images/home.gif);
}
.menu ul li.home a:hover {
background-position:bottom;
}
.menu ul li.contact a {
background:url(images/contact.gif);
}
.menu ul li.contact a:hover {
background-position:bottom;
}

We stellen telkens de achtergrondafbeelding in. Dan zorgen we ervoor, als je over de link gaat, dat de achtergrondafbeelding veranderd van plaats. Dus de onderkant van het plaatje, met de hover button, wordt zichtbaar.

Nu heb je een image hover menu zonder javascript.