Come creare un menu verticale in css

Guida css di base per la creazione d’un menu verticale in css con spiegazione passo per passo delle proprietà css applicate seguendo 2 marcature html differente: il primo con l’uso di una lista html e il secondo senza l’uso di una lista html ma con semplice link contenuti in un div contenitore.

1. Menu verticale con l’uso d’una lista html

La marcatura html usata:

<ul id="menu_css_verticale">
<li><a href="#nogo" class="primo">link 1</a></li>
<li><a href="#nogo">link 2</a></li>
<li><a href="#nogo">link 3</a></li>
<li><a href="#nogo">link 4</a></li>
</ul>

Il risultato senza stile css:

• link 1
• link 2
• link 3
• link 4

Lo stile css per creare un menu verticale con l’uso di una lista:

1. Iniziamo per dare lo stile a l’elemento <ul> con id="menu_css_verticale".

#menu_css_verticale{
/*1. specifichiamo una larghezza fissa per il menu*/
width:150px;
/*2. rimuoviamo i marcatori della lista*/
list-style:none;
/*3. azzeriamo le margine – richiesto per Internet Explorer*/
margin:0;
/*4. impostiamo un spazio cuscinetto (padding) di 1 px tra i bordi della lista e il suo contenuto*/
padding:1px;
/*5. aggiungiamo un colore di sfondo al menu*/
background-color:#FFFFFF;
/*6. e un bordo di 1px intorno*/
border:1px solid #437E7E;
}

Il risultato:

• link 1
• link 2
• link 3
• link 4

2. Adesso possiamo impostare lo stile css relativo ai link (elementi <a>) stessi:

#menu_css_verticale a{
/*1. convertiamo i link da elementi inline a elemento di blocco, cosi coprono tutta la larghezza disponibile*/
display:block;
/*2. specifichiamo un altezza – richiesto per Internet Explorer 6*/
height:25px;
/*3. aggiungiamo un spazio superiore tra ogni link*/
margin-top:1px;
/*4. e un spazio cuscinetto (padding) a sinistra tra il bordo e il testo dei link*/
padding-left:15px;
/*5. specifichiamo un colore di sfondo per i link*/
background-color:#F0F7F7;
/*6. e un bordo sinistro di 10px*/
border-left:10px solid #C7E2E2;
/*7. speficiamo il tipo di carattere usato*/
font-family:arial;
/*8. e la misura del carattere*/
font-size:10px;
/*9. convertiamo i caratteri da minuscolo a maiuscolo*/
text-transform:uppercase;
/*10. togliamo la sottolineatura dei link aggiunta per default*/
text-decoration:none;
/*11. specifichiamo un colore per i link*/
color:#437E7E;
/*12. allineiamo verticalmente il testo*/
line-height:25px;
}

Il risultato:

• link 1
• link 2
• link 3
• link 4

3. Finalmente, possiamo dare lo stile css ai link quando l’utente passa sopra i link (stato hover)…

#menu_css_verticale a:hover{
/*1. cambiamo il colore di sfondo dei link*/
background-color:#E5E5E5;
/*2. il colore del bordo sinistra*/
border-left:10px solid #CCCCCC;
/*e il colore dei link stessi*/
color:#666666;
}

4. ed azzerare il margine del primo link usando la classe ‘primo’ cosi da evitare lo spazio extra a l’inizio del menu.

#menu_css_verticale a.primo{
margin-top:0;
}

Il risultato finale del menu css verticale con l’uso di una lista:

• link 1
• link 2
• link 3
• link 4

2. Menu verticale senza l’uso d’una lista html

Stesso risultato può essere raggiunto senza l’uso di una lista, con la seguente marcatura html:

<div id="menu_css_verticale">
<a href="#nogo" class="primo">link 1</a>
<a href="#nogo">link 2</a>
<a href="#nogo">link 3</a>
<a href="#nogo">link 4</a>
</div>

Il risultato senza applicare lo stile css:

Lo stile css usato per creare un menu css verticale senza l’uso di una lista:

Il stile css è di base lo stesso visto prima, togliendo solo le proprietà css speficiche alle liste.

/*1. lo stile del div contenitore con id=”menu_css_verticale”*/
#menu_css_verticale{
width:150px;
padding:1px;
background-color:#FFFFFF;
border:1px solid #437E7E;
}

/*2. lo stile css dei link (elementi <a>)*/
#menu_css_verticale a{
display:block;
height:25px;
margin-top:1px;
padding-left:15px;
background-color:#F0F7F7;
border-left:10px solid #C7E2E2;
font-family:arial;
font-size:10px;
text-transform:uppercase;
text-decoration:none;
color:#437E7E;
line-height:25px;
}

/*3. lo stile css sullo stato hover dei link*/
#menu_css_verticale a:hover{
background-color:#E5E5E5;
border-left:10px solid #CCCCCC;
color:#666666;
}

/* rimossione del margine superiore per il primo link*/
#menu_css_verticale a.primo{
margin-top:0;
}

Il risultato finale del menu css verticale senza l’uso di una lista:

Menu css verticale provato con IE6, IE7, FF2, FF3, Safari 3.1, Opera 9, Google Chrome su Windows.

This article in english >>