CSS: menu verticale

I menu CSS semantici vengono normalmente realizzati con le liste non ordinate. Un menu verticale è semplicemente una lista in cui le voci si dispongono l'una sopra all'altra. Possiamo tuttavia perfezionarne il design aggiungendo una diversa immagine di sfondo per ciascuna voce. Vediamo come.

Partiamo dalla seguente struttura HTML:

<ul id="navigation">

	<li id="home"><a href="#">Home</a></li>
	<li id="articles"><a href="#">Articoli</a></li>
	<li id="about"><a href="#">About</a></li>
	<li id="contacts"><a href="#">Contatti</a></li>

</ul>

In questo caso abbiamo usato diversi ID sulle voci perchè presupponiamo che vi sia un solo menu di questo tipo nella pagina. Ovviamente se vi sono più menu occorre usare delle classi.

Partiamo con gli stili sulla lista:

#navigation {
  width: 20em;
  padding: 1em;
  margin: 0 auto;
  border: 1px solid gray;
  border-radius: 10px;
  list-style: none;
}

Le misure in em ci permettono di creare un menu elastico che asseconda il cambiamento di dimensione del font della pagina. Volendo ottenere un maggiore controllo si può usare la proprietà max-width.

Passiamo quindi alle voci di lista:

#navigation li {
    display: block;
    margin-bottom: 0.5em;
    height: 100%;
    border-bottom: 1px solid gray;
    padding-bottom: 4px;
    font: 2em Impact, sans-serif;
    padding-left: 55px;
    background-position: 0 0;
    background-repeat: no-repeat;
    padding-top: 5px;
}

Le voci di lista hanno per impostazione predefinita il ruolo list-item, quindi le abbiamo trasformate in elementi di blocco. height: 100% ha senso solo per Internet Explorer 7 ed inferiori. Il padding sinistro impostato tiene conto della larghezza delle immagini di sfondo che verranno applicate sulle voci.

Applichiamo infine le immagini di sfondo e degli stili di base per i link:

#navigation #home {
  background-image: url(home.png);
}
#navigation #articles {
  background-image: url(articles.png);
}
#navigation #about {
  background-image: url(about.png);
}
#navigation #contacts {
  background-image: url(contacts.png);
}

#navigation li a {
    text-decoration: none;
    color: gray;
    text-transform: uppercase;
}
#navigation li a:hover {
    color: #333;
}

Potete visionare l'esempio finale in questa pagina.