Dopo avere visto come creare un menu css verticale di base, in questa seconda parte, vediamo come creare un menu orizzontale in css.
Guida css di base per la creazione d’un menu orizzontale 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 orizzontale con l’uso d’una lista html
La marcatura html usata:
<ul id="menu_css_orizzontale">
<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:
Lo stile css per creare un menu orizzontale con l’uso di una lista:
1. Iniziamo per dare lo stile a l’elemento <ul> con id="menu_css_orizzontale".
#menu_css_orizzontale{
/*specificare qui un width per un menu orizzontale a larghezza fissa*/
/*1. rimuoviamo i marcatori della lista*/
list-style:none;
/*2. usiamo questo metodo per evitare che lo sfondo dell’elemento contenitore collassa con elementi floatati*/
overflow:hidden;
/*3. relativo al metodo applicato sopra, per Internet Explorer 6, specifichiamo una larghezza di 100%*/
width:100%;
/*4. azzeriamo le margine - richiesto per Internet Explorer*/
margin:0;
/*5. impostiamo un spazio cuscinetto (padding) di 1 px tra i bordi della lista e il suo contenuto*/
padding:1px;
/*6. aggiungiamo un colore di sfondo al menu*/
background-color:#FFFFFF;
/*7. e un bordo di 1px intorno*/
border:1px solid #437E7E;
}
Il risultato:
2. Per un corretto allineamento orizzontale dei link con Internet Explorer, convertiamo gli elementi <li> da elemento di blocco a elementi inline:
#menu_css_orizzontale li{
display:inline;
}
3. Adesso possiamo impostare lo stile css relativo ai link (elementi <a>) stessi:
#menu_css_orizzontale a{
/*1. convertiamo i link da elementi inline a elemento di blocco, per potere poi specificare altezza/larghezza*/
display:block;
/*2. usiamo la proprietà float per allineare gli elementi orizzontalmente*/
float:left;
/*3. specifichiamo una larghezza per link di stessa larghezza nel caso di questo esempio*/
/*per link di larghezza relativa alla larghezza del testo, usare padding-right invece di width*/
width:60px;
/*4. e un altezza*/
height:25px;
/*5. aggiungiamo un spazio a sinistra tra ogni link*/
margin-left:1px;
/*6. e un spazio cuscinetto (padding) a sinistra tra il bordo e il testo dei link*/
padding-left:15px;
/*7. specifichiamo un colore di sfondo per i link*/
background-color:#F0F7F7;
/*8. e un bordo sinistro di 10px*/
border-left:10px solid #C7E2E2;
/*9. specifichiamo il tipo di carattere usato*/
font-family:arial;
/*10. e la misura del carattere*/
font-size:10px;
/*11. convertiamo i caratteri da minuscolo a maiuscolo*/
text-transform:uppercase;
/*12. togliamo la sottolineatura dei link aggiunta per default*/
text-decoration:none;
/*13. specifichiamo un colore per i link*/
color:#437E7E;
/*14. allineiamo verticalmente il testo*/
line-height:25px;
}
Il risultato:
4. Finalmente, possiamo dare lo stile css ai link quando l’utente passa sopra i link (stato hover)…
#menu_css_orizzontale a:hover{
/*1. cambiamo il colore di sfondo dei link*/
background-color:#E5E5E5;
/*2. il colore del bordo sinistra*/
border-left:10px solid #CCCCCC;
/*3. e il colore dei link stessi*/
color:#666666;
}
5. ed azzerare il margine del primo link usando la classe ‘primo’ cosi da evitare lo spazio extra a l’inizio del menu.
#menu_css_orizzontale a.primo{
margin-left:0;
}
Il risultato finale del menu css orizzontale con l’uso di una lista:
2. Menu orizzontale 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_orizzontale">
<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>
Lo stile css usato per creare un menu orizzontale 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_orizzontale”*/
#menu_css_orizzontale{
overflow:hidden;
width:100%;
padding:1px;
background-color:#FFFFFF;
border:1px solid #437E7E;
}
/*2. lo stile css dei link (elementi <a>)*/
#menu_css_orizzontale a{
display:block;
float:left;
width:60px;
height:25px;
margin-left: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_orizzontale a:hover{
background-color:#E5E5E5;
border-left:10px solid #CCCCCC;
color:#666666;
}
/* rimossione del margine sinistra per il primo link*/
#menu_css_orizzontale a.primo{
margin-left:0;
}
Il risultato finale del menu css orizzontale senza l’uso di una lista:
Provato su IE6, IE7, FF2, FF3, Safari 3.1, Opera 9, Google Chrome su Windows.
{ 1 trackback }
{ 1 comment… read it below or add one }
Grazie infinite!
E’ la prima volta che leggo un tutorial sui css così chiaro! (considerato che io sono assolutamente imbranata in queste cose…e questa volta ho capito tutto, o almeno credo!)
Quindi… grazie grazie grazie!!!