CSS: un menu che sfrutta l'effetto hover

Le specifiche del W3C prevedono per i link i seguenti stati: active (attivo), visited (già visitato) e hover (la freccia del mouse è sopra il link). Questa importante distinzione fra gli stati di un link ci permette di personalizzare nel foglio di stile l'aspetto del link! Nell'esempio che vi propongo realizzeremo un semplice menu, con più voci.

L'elenco dei collegamenti del nostro menu è realizzato con elementi li, appartenenti alla lista non ordinata ul. Per poter descrivere lo stile delle voci che inseriremo nella lista forniamo questa prima regola:


#menu {
 list-style: none;
 font-family: arial;
 font-size: 12px;
}


che oltre a descrivere le proprietà per il testo deseleziona l'elemento stilistico che solitamente precede una voce dell'elenco (di solito un disco pieno). La lista contiene uno o più elementi li, ogni voce dell'elenco inizia tuttavia su una nuova riga. In altre parole l'elemento li è un elemento di blocco, pertanto se siamo interessati ad avere un menu orizzontale dobbiamo necessariamente dare questa regola:


#menu li {
 display: inline;
}


Dopo questa regola, l'elemento li diventa un elemento in linea! Procediamo nella stesura del foglio di stile, ogni elemento li conterrà un link (tag a) alla pagina del sito. Come deve essere formattato questo tag?


#menu li a {
 text-decoration: none;
 padding: 5px;
 color: #000066;
}


Qui ho deciso di non applicare nessuna decorazione al testo, che per un link consiste di default in una linea che sottintende il testo. Cosa deve avvenire quando la freccia del mouse passa sul link?


#menu li a:hover {
 border-bottom: red solid 4px;
 color: #0000fd;
}


Il testo assume una tonalità più chiara rispetto al colore di base e una linea spessa sottolinea la voce puntata dal mouse. Per rendere l'aspetto del menu più piacevole ho poi aggiunto una linea orizzontale, spostata in maniera tale da coincidere (qualche pixel più in giù) con la linea che compare al passaggio del mouse sul link.


#cornice hr {
 border-width: 0;
 height: 2px;
 color: red;
 background-color: red;
 margin: -5px;
}


L'effetto noshade (una proprietà del tag hr) dell'html è stato deprecato dal W3C, che adesso consiglia di usare il foglio di stile per ottenere una linea senza ombreggiatura. Qui è possibile vedere il foglio di stile completo, questa inveca è la pagina html con il menu.