In questo tutorial, vediamo come creare un menu css dropdown orizzontale di base usando liste non ordinate e liste innestate.

Userò la proprietà css visibility per nascondere i sub item del menu e renderli visibile sullo stato :hover.

Il menu css funziona per i maggiori browser di recente edizione.
Alla fine dell’ articolo, spiegherò come farlo funzionare anche per Internet Explorer 6.

Inizio con la marcatura html di base che consista in una lista non ordinata contenendo lei stessa un’ altra lista per i sub elementi:

<div id=”menu”>
<ul>
<li><a href=”#nogo”>Link 1</a>
<ul>
<li><a href=”#nogo”>Link 1-1</a></li>
<li><a href=”#nogo”>Link 1-2</a></li>
<li><a href=”#nogo”>Link 1-3</a></li>
</ul>
</li>
<li><a href=”#nogo”>Link 2</a>
<ul>
<li><a href=”#nogo”>Link 2-1</a></li>
<li><a href=”#nogo”>Link 2-2</a></li>
<li><a href=”#nogo”>Link 2-3</a></li>
</ul>
</li>
<li><a href=”#nogo”>Link 3</a>
<ul>
<li><a href=”#nogo”>Link 3-1</a></li>
<li><a href=”#nogo”>Link 3-2</a></li>
<li><a href=”#nogo”>Link 3-3</a></li>
</ul>
</li>
</ul>
</div>

Nel seguente preview, possiamo vedere il nostro menu prima di applicare uno stile css :

Siccome i browsers hanno diversi modi di interpretare il margine (margin) e spazio ‘cuscinetto’ (padding), azzerò il tutto per il menu (#menu), ul (lista non ordinata) e li (item della lista).
Applico il float:left; per creare un menu orizzontale di base e la posizione relativa che ci permetterà di seguito di porre i sub elementi in modo assoluto. Tolgo anche la marcatura della lista con list-style:none;:

#menu{
padding:0;
maragin:0;
}
#menu ul{
padding:0;
margin:0;
}
#menu li{
position: relative;
display: left;
list-style: none;
margin: 0;
padding:0;
}

Il risultato fine adesso:

Posso adesso dare un pò di stile ai links:

• larghezza width:100px;
• altezza height:30px;
• dichiaro come blocco display:block;
• tolgo la sotto lineatura dei links text-decoration:none;
• allineo il testo sia orizzontalmente text-align: center; che verticalmente line-height:30px;
• colore di sfondo nero background-color:black; e un colore di testo bianco color:white;

#menu li a{
width:100px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}

Per avere un minimo d’effetto visivo, cambio il colore di sfondo (da nero a rosso) allo stato :hover del link contenuti negli items della lista (li):

#menu li a:hover{
background-color: red;
}

Dettaglio del risultato:

Adesso, posiziono i sub elementi:

Uso la proprietà css position:absolute; per rimuovere i ’sub’ ul del flusso della pagina, li sposto di 30px partendo dalla parte superiore in maniera che si ritrovano sotto
il primo elemento con top:30px; (30px essendo l’altezza impostata per prima)

#menu ul ul{
position: absolute;
top: 30px;

Il risultato:

Uso la proprietà css visibility:hidden; (visibilita nascosta) per nasconderli:

visibility: hidden;
}

Finalemente, finisco il nostro menu css dropdown, facendo il modo che on :hover, i ’sub’ ul sono visibile, cambiando semplicemente la sua proprietà visibility a visible (visibile) invece di hidden (nascosto):

#menu ul li:hover ul{
visibility:visible;
}

Il risultato finale dal vivo (passa sopra con il mouse):

Dopo avere provato questo menu css dropdown orizzontale di base con i maggiori browsers, funziona benissimo per IE7, Firefox, Opera e Safari.

Il problema trovato è con IE6.

Con Internet Explorer 6, non funziona proprio e lo stato :hover è ignorato.

Anche se personalmente, lo lascerei a perdere completamente, ancora tanti utenti lo usano per quello ho cercato una soluzione facile da implementare senza dovere modificare tutta la marcatura html e css.

Ho trovato una soluzione nel libro Eric Meyer on CSS che usa un file .htc creato da Peter Nederloff.

L’articolo è in inglese. In breve, IE6 non supporta il :hover su altri elementi che il tag <a>, il quale rende questo menu dropdown completamente inutile.
Pero IE supporta i cosi chiamati ‘behaviors’ (ignorati da FF e altri browsers ‘moderni’ ma per quelli il menu funziona com’ è).
Questo ‘behaviors’ permette di caricare un file tipo .htc che cambia il comportamento degli elementi a quali sono impostati lo stato :hover con l’uso d’ eventi onmouse.
Non sono programmatrice, per quello non mi sono messa a studiare il script incluso in questo file .htc che può essere scaricato gratuitamente dal sito di Peter Nederloff.

Ho usato la versione 2 del file .htc per il mio esempio (csshover2.htc).
Ritornando all’esempio, il file .htc che ci permetterà di fare funzionare questo menu anche per IE6 viene inserito nel foglio di stile all’ elemento body, in questa maniera;

body{
behavior: url(csshover2.htc);
}

PS: per utenti di IE6, questo file .htc non è applicato a l’esempio di sopra

Condividi questo articolo su