Menù di navigazione con CSS

In questo breve tutorial, vedremo come realizzare un oggetto molto utile da utilizzare nel nostro sito web. Una barra di navigazione (menù) con effetto rollover senza l'utilizzo di immagini e senza codice di scripting. Questa soluzione permette di avere un codice molto pulito ed elegante e soprattutto compatible con tutti i browser.
Suggerisco di inserire il codice all'interno del file CSS che conterrà anche gli altri stili del nostro sito.
Prima di vedere il codice utilizzato, spiego il concetto con il quale ho realizzato queste pagine; in un box, che io ho chiamato div#testa, inseriremo il menù.

Ecco di seguito, il codice per div#testa:

#testa {
width: 760px;
margin: 0 auto;
padding: 0;
height: 50px;
background: #009999;
}

Niente di strano fin qui. Per fare in modo che anche NN e Firefox visualizzi al centro una gabbia, si deve scrivere, per i margini destro e sinistro: auto; per fare in modo che ci sia compatibilità anche con IE, nel body si deve scrivere: text-align: center.
Passiamo ad analizzare il codice della barra di navigazione

#testa li { display: inline; }

Impostando la proprietà li come display:inline permette di avere il menù sviluppato in orizzontale invece che in verticale.

#testa a {
display: block;
float: left;
height: 32px;
margin: 0;
padding: 18px 30px 0 30px;
text-decoration: none;
text-transform: capitalize;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
}

Nella proprietà a definiamo la formattazione del testo contenuto nel menù. Vorrei solo evidenziare che l'elemento padding: 18px 30px 0 30px; è impostato per aver una corretta spaziatura tra le voci del menù: 18px di spaziatura dall'alto, 30px a destra e altrettanti a sinistra del testo.

#testa a:hover { color: #000000; }

Impostando la proprietà a:hover come color: #000000 ci permetterà di far cambiare colore alla voce di menù quando il mouse ci passerà sopra. Infine, nel corpo della pagina HTML avremo il seguente codice:

<h1>Titolo Sito</h1>
<div id="testa">
<ul>
<li><a href="pag1.htm" title="Vai a pagina 1">Pagina 1</a></li>
<li><a href="pag2.htm" title="Vai a pagina 2">Pagina 2</a></li>
<li><a href="pag3.htm" title="Vai a pagina 3">Pagina 3</a></li>
<li><a href="pag4.htm" title="Vai a pagina 4">Pagina 4</a></li>
</ul>
</div>

Potrebbe sembrare strano trovare i tag per un menu, quando nella pagina abbiamo dei tabs in linea; ebbene è la potenza dei CSS che ci permette di ottenere ciò. Per visualizzare l'esempio descritto, clicca qui.