menu 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;
}

Ecco il link alla demo.

Potete scaricare i files dell’esempio:

http://www.emawebdesign.com/wp-content/plugins/downloads-manager/img/icons/winzip.gif download: MenuCSS (6.26KB)
added: 28/10/2008
clicks: 2175
description: Menu con rollover realizzato tramite CSS

E voi come realizzate il rollover per i vostri menu?

NO SPAM. Non fornirò la tua email a terzi e riceverai solo contenuti che ti interessano sugli argomenti che tratto e potrai cancellarti quando vuoi con un link che trovi in tutte le email.