Menu con rollover tramite CSS

Un menu di navigazione per essere gradevole alla vista deve avere un buon design ma anche un effetto rollover (l’evento che avviene sul pulsante al passaggio del mouse).

Un effetto rollover può essere realizzato in diversi modi e con diverse tecniche. Oggi vediamo come realizzare un menu con rollover realizzato tramite CSS.

Per prima cosa, con il nostro editor grafico preferito, realizziamo due immagini (menu.jpg e menu_rollover.jpg) che rappresentano il pulsante e il pulsante al passaggio del mouse. In questo caso, sul rollover, prevediamo un cambiamento del colore del pulsante.

Andiamo quindi a realizzare il DIV (menu) che contienre il menu di navigazione:

<div id=”menu”>
<ul>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
<li><a href=”#”>Item 4</a></li>
</ul>
</div>

Definiamo per prima cosa una regola per l’UL per eliminare margin, padding e il disco:

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

Ora definiamo gli stili per i link:

#menu a {
display:block;
background:url(menu.jpg) no-repeat;
width:150px;
height:30px;
font:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-decoration:none;
padding-left:20px;
padding-top:4px;
}

Abbiamo impostato la proprietà display su block per dare una dimensione al pulsante, quindi l’immagine di sfondo e lo stile per il font.

Questa la regola per il rollover (praticamente cambiamo l’immagine di sfondo):

#menu a:hover {
background:url(menu_rollover.jpg) no-repeat;
}

E voi come realizzate il rollover per i vostri menu?