Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Menu a comparsa laterale

Menu a comparsa laterale

di Nick Rigby, traduzione di Gdesign, 28 Aprile 2005

Versione Stampabile

L'articolo originale in lingua inglese è "Drop-Down Menus, Horizontal Style" ed è stato tradotto per gentile concessione di A List Apart Magazine e dell'autore.


Chiunque tra voi abbia creato dei menu a comparsa conosce bene la considerevole quantità di scripting che questo tipo di menu richiede. Però, utilizzando del codice HTML ben strutturato ed un semplice CSS, è possibile generare un menu a comparsa laterale che risulti facile da pubblicare ed aggiornare e che funzioni su diversi browser, Internet Explorer compreso. E per di più non è richiesto Javascript! (Effettivamente, un pezzettino di Javascript è necessario, ma non è quello che pensate voi.)

Ecco un'anteprima del menu in azione.

Creare il menu

La prima e più importante parte della realizzazione del nostro menu è la struttura stessa del menu. La cosa migliore da fare è creare un elenco non ordinato, con ogni sotto menu che a sua volta compare come elenco non ordinato all'interno della voce dell'elenco genitore. Suona complicato? Invece è davvero molto semplice:

  <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a> 
      <ul> 
        <li><a href="#">History</a></li> 
        <li><a href="#">Team</a></li> 
        <li><a href="#">Offices</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Services</a> 
      <ul> 
        <li><a href="#">Web Design</a></li> 
        <li><a href="#">Internet 
            Marketing</a></li> 
        <li><a href="#">Hosting</a></li> 
        <li><a href="#">Domain Names</a></li> 
        <li><a href="#">Broadband</a></li> 
      </ul> 
    </li>
    <li><a href="#">Contact Us</a> 
      <ul> 
        <li><a href="#">United Kingdom</a></li> 
        <li><a href="#">France</a></li> 
        <li><a href="#">USA</a></li> 
        <li><a href="#">Australia</a></li> 
      </ul> 
    </li> 
  </ul>

Ecco: del semplice HTML accessibile e facile da modificare.

Visivamente attraente?

Se guardate l'anteprima del menu sopra, vedrete un elenco di voci piuttosto noioso. Ed io vi ho promesso un menu attraente! Aggiungiamo allora gli stili.

Per prima cosa rimuoviamo le rientranze ed i punti elenco e definiamo la larghezza delle nostre voci di menu.

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	}

Poi, dobbiamo posizionare le voci dell'elenco. Fortunatamente le voci stanno implicitamente una sotto l'altra. Tuttavia, dobbiamo impostare la loro posizione come relative perché poi avremo la necessità di posizionare i sotto menu in modo assoluto.

ul li {
	position: relative;
	}

Il passo successivo riguarda i sotto menu. Desideriamo che al passaggio del mouse sopra una voce, i sotto menu compaiano a destra, proprio in corrispondenza di quella voce.

li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}

Usando gli attributi "left" e "top", possiamo posizionare in modo assoluto ogni sotto menu all'interno della voce relativa. Noterete che ho impostato la proprietà "left" a 149px (1px in meno della larghezza delle voci di menu), e questo per fare in modo i sotto menu coincidano con il menu principale e non producano un doppio bordo. (vedrete successivamente cosa intendo.)

Inoltre, abbiamo impostato "none" per la proprietà display perchè vogliamo che, di default, i sotto menu non siano visibili.

Così adesso abbiamo la struttura a posto, ma non abbiamo ancora finito. Impostiamo gli stili per i collegamenti ipertestuali:

ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

Ho impostato questi stili secondo il mio gusto personale, ma potete cambiarli secondo le vostre preferenze, come meglio desiderate. È importante però impostare "block" per la proprietà display, poichè vogliamo che ogni collegamento occupi tutto lo spazio disponibile della voce dell'elenco che lo contiene.

Adesso le cose vanno un pò meglio, anche se gli utenti di Internet Explorer per Windows potrebbero non essere d'accordo. Purtroppo, IE per Windows interpreta le interruzioni di riga presenti nel nostro codice HTML tra le voci dell'elenco come spazio bianco, e di conseguenza in questo browser le voci non stanno correttamente una sotto l'altra. Ad ogni modo, c'è un modo per aggirare questo bug di IE:

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

Possiamo applicare l'Holly Hack come sopra, che nasconde queste regole a tutti i browser tranne che a IE per Windows. Perfetto. Noterete che abbiamo anche impostato un valore (1%) all'altezza. Purtroppo (di nuovo!) l'aver definito il float scopre un altro bug IE, che ha bisogno di un valore per l'altezza affinchè i collegamenti vengano visualizzati cone elementi block-level.

Inoltre noterete che è necessario chiudere il menu e questo può essere fatto aggiungendo il bordo mancante alla parte inferiore della lista. Così, la regola per ul diventa:

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #ccc;
	}

Con un pò di fortuna, adesso tutti dovreste riuscire a vedere il menu non funzionante.

Facciamolo funzionare

Ora la parte divertente. Dobbiamo fare in modo che i sotto menu compaiano al passaggio del mouse sopra le voci del menu.

li:hover ul { display: block; }

Voilà....ecco il menu in funzione.

Ho sentito l'1% di voi che ha esultato: "Woo hoo! Funziona!"

Ok, Ok, IE per Windows riesce a rovinare tutto e non fa quello che avevo detto io. IE/Win permette di applicare la pseudo classe :hover soltanto ad un collegamento ipertestuale e quindi li:hover, che fa in modo che i sotto menu compaiano, non funziona in IE.

E' richiesto allora un pezzetto di JavaScript per far funzionare il menu in IE:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

Ringrazio Patrick Griffiths e Dan Webb che hanno presentato questo trucchetto in un precedente articolo pubblicato su AListApart: Suckerfish Dropdowns. Grazie ragazzi!

Così, la regola hover adesso diventa:

li:hover ul, li.over ul { 
	display: block; }

Inoltre dobbiamo associare il Javascript alla nostra ul principale, che diventa:

<ul id="nav">

Se tutto va bene, con i suddetti cambiamenti, ognuno di voi dovrebbe poter vedere una semplice versione del menu in azione.

Sistemare il bug del menu in IE5.01

Chiunque tra voi utilizzi IE5.01 su Windows noterà che il menu non si comporta correttamente. Il problema si risolve facilmente modificando il nostro precedente hack in questo modo:

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

Un misterioso bug di IE6:

Durante lo sviluppo di questo articolo, ho scoperto uno strano bug che credo sia presente solo in IE6. Bisongna impostare un sfondo a li a, altrimenti quando un sotto menu è più lungo del menu stesso, i collegamenti iniziano a sparire prima che abbiate il tempo di cliccarci sopra. Strano! Provate voi stessi a vedere questo insolito comportamento.

Fate il vosto menu

E' tutto! Un metodo, che rispetta gli standard, per la generazione di menu a comparsa laterale visivamente attraenti. Tutto quello che dovete fare adesso è definire qualche proprietà per :hover ed avrete il vostro menu personalizzato. Giusto per darvi un assaggio ho preparato velocemente questo bel menu. Godetevelo!

^Top

Dai un voto a questo articolo:   HITS: 77128 | VOTI: 149 | MEDIA VOTI: 8.5    

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 4