In molte occasioni capita di avere dei siti particolarmente articolati, in cui un menu su più livelli può aiutare tantissimo il navigatore nel trovare rapidamente quello che sta cercando, senza essere costretto a molti passaggi.
Per realizzare un menu di questo tipo utilizzeremo il codice “Son of Suckerfish Dropdowns”, dal nome particolare, ma fantastico in quanto a resa e a compatibilità sui diversi browsers.
Quello che otterremo sarà un qualcosa del tipo: dropdown menu verticale (oppure in orizzontale).
Per prima cosa scriviamo il codice html del menu con una lista non ordinata:
A questo punto diamo un minimo di stile alla nostra lista per posizionarla in orizzontale e definire la larghezza dei link e dei li:
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 10em;
}
#nav li {
float: left;
width: 10em;
}
Occorre specificare una larghezza per #nav li altrimenti il menu funzionerà male su Opera dando un effetto di tremolio. Occorre anche ricordare che dal momento che stiamo utilizzando il comando float, il codice che scriveremo posizionato dopo il menu dovrà avere tra le proprietà il comando (clear: left), per annullare il float.
Fino a questo punto abbiamo impostato l’HTML del menu di primo livello. Occupiamoci dello stile del secondo livello.
Vogliamo fare in modo che il menu di secondo livello non si veda, se non quando l’utente passa il mouse su una delle voci di primo livello, inoltre, per lavorare secondo gli standard di accessibilità dobbiamo evitare di utilizzare il comando display: none, utilizzeremo quindi la proprietà left.
Impostiamo il comando left: -999em per far sparire il menu di secondo livello e poi left:auto (al posto di 0) per farlo apparire.
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
Potremmo aver finito qui se non esistesse, come al solito, il simpaticissimo Internet Explorer, che non supporta appieno la proprietà :hover su elementi che non siano i link; per salvarci utilizziamo il codice javascript Suckerfish:
Fondamentalmente lo script applica una classe ’sfhover’ ai LI del #nav ovvero #nav li.sfhover ul quando sono ‘moused over’ e la rimuove utilizzando un’espressione regolare quando sono ‘moused out’.
A questo punto occorre ancora qualche riga di codice per impostare le nuove classi create utilizzando il codice Suckerfish, dobbiamo, infatti, duplicare il selettore :hover e dare le sue proprietà anche a ’sfhover’:
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Il gioco è fatto, arrivati qui avremo un dropdown menu di questo tipo: dropdown menu primo livello
Menu dropdowns multilivello
La struttura dei menu a cascata con un sistema multilivello si complica, partiamo come sempre dall’HTML:
Innanzi tutto dovremo fare in modo che il menu di terzo livello sia spostato e cada a cascata rispetto all’UL che lo contiene, quindi dovremo aggiungere nel foglio di stile:
#nav li ul ul {
margin: -1em 0 0 10em;
}
Mettiamo -1em per fare in modo che il menu di terzo livello sia allineato con la sua voce di menu di secondo livello. Il problema usando gli em è che non corrispondono all’altezza di riga (line-height) che normalmente ha una misura di 1.2 em, quindi dovremo aggiungere una regola aggiuntiva agli ul iniziali, ovvero gli assegneremo una line-height pari a 1:
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
Come abbiamo fatto per il menu di secondo livello nel dropdown semplice, dovremo nascondere il menu di terzo livello quando non è selezionato, lo facciamo aggiungendo nel foglio di stile la specifica per la sua classe .sfhover:
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
Come avreta capito il codice javascript che utilizziamo è identico a quello per il menu dropdown a livello singolo, a cambiare sono le proprietà degli UL e dei LI annidati nei sottolivelli.
Come abbiamo fatto sparire il nuovo UL di terzo livello, così lo dovremo far apparire quando si va con il mouse sopra la voce di menu che lo contiene, quindi:
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left: auto;
}
Il gioco è fatto, il dropdown menu a due sotto livelli è pronto, potete vederne un esempio qui.
Ormai avete capito il meccanismo, quindi se ad esempio volessimo un menu con tre livelli annidati, dovremo modificare il foglio di stile in questo modo:
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
A questo punto giocando semplicemente con le misure nel foglio di stile potremo realizzare un dropdown menu orizzontale, come in questo esempio.
Una volta impostato il sistema potremo giocarci come vogliamo per migliorarlo graficamente, ad esempio con piccolissime modifiche al foglio di stile possiamo ottenere un qualcosa di simile a questo esempio.
Tags: CSS, Dropdown Menu, Javascript, Web Design
