Vai ai contenuti

LAU



Home > realizzare > accessibilità: fogli di stile > Menu a due livelli con i CSS


Menu a due livelli con i CSS

Grazie ai CSS è possibile realizzare menu di navigazione a due livelli che funzionano correttamente anche in Internet Explorer.

A cura di: Fabio Regina | 1 giugno 2006


La realizzazione di menu a due o più livelli - i cosidetti menu a tendine - richiede molto spesso un uso massiccio di codice javascript. L'alternativa all'uso di javascript sono i css i quali renderebbero il codice HTML più pulito, semanticamente valido e accessibile. Tuttavia l'utilizzo esclusivo dei css nasconde delle insidie. Infatti, il browser proprietario della Microsoft (Internet Explorer) a differenza di altri (Mozilla, Firefox, Opera o Safari) si limita a supportare correttamente la pseudo-classe :hover, necessaria per la realizzazione di menu a tendine, solo per le ancore e non per gli altri elementi.

Lo stato di hover si riferisce al comportamento che assume un elemento nel momento in cui il cursore del mouse passa sopra di esso. Vediamo un esempio.

esempio link

Al precedente link è stata applicata la seguente regola:

a:link{ 
color:#900; 
text-decoration: underline;
font-weight:bold;
}
a:hover{ 
text-decoration: none; 
background:#900;
color:#fff;
}

Con l'uscita di Internet Explorer 7.0 (al momento è disponibile sul sito della Microsoft la versione beta 2 [link esterno]) verranno apportate molte novità riguardo al supporto dei CSS. Tra i vari bachi risolti vi è quello relativo al supporto della pseudoclasse :hover su tutti gli elementi, non solo sui link. Nonostante ciò, non sarà ancora supportato per le regole inserite in fogli di stile attraverso la direttiva @import.
Oggi, grazie ad alcuni studi effettuati dallo sviluppatore inglese Dean Edwards che lavora da tempo ad un progetto chiamato IE7 [link esterno], è possibile applicare la pseudo-classe :hover a tutti gli elementi anche in IE 6.0 e precedenti. IE7 è un insieme di complesse librerie (moduli) da collocare sul server su cui risiedono le pagine e che vengono collegate alle pagine stesse con meccanismi simili ai fogli di stile CSS o a Javascript. IE7 effettua una sorta di "traduzione", a beneficio del browser di Microsoft, di quegli elementi che quest'ultimo non è in grado di capire. Prende, ad esempio, un foglio di stile CSS, effettua il parsing e lo riscrive in una forma che Explorer riesce a interpretare e rendere correttamente.

Vediamo come è possibile (con l'ausilio delle tecniche sperimentate da Edwards) realizzare un menu a due livelli a partire da una semplice lista formattata con i CSS che funziona correttamente anche in IE 6.0 e precedenti senza l'uso di javascript.

Primo passo:

Per prima cosa creiamo una lista con un insieme di liste annidate:

<ul>
 <li><a href="#">Italia</a>
  <ul>
   <li><a href="#">Roma</a></li>
   <li><a href="#">Milano</a></li>
   <li><a href="#">Torino</a></li>
 </ul>
 </li>
<li><a href="#">Spagna</a>
  <ul>
   <li><a href="#">Madrid</a></li>
   <li><a href="#">Barcelona</a></li>
   <li><a href="#">Zaragoza</a></li>
 </ul>
 </li>
<li><a href="#">Germania</a>
  <ul>
   <li><a href="#">Berlin</a></li>
   <li><a href="#">Munchen</a></li>
   <li><a href="#">Kholn</a></li>
 </ul>
 </li>
<li><a href="#">Gran Bretagna</a>
  <ul>
   <li><a href="#">London</a></li>
   <li><a href="#">Liverpool</a></li>
   <li><a href="#">Manchester</a></li>
 </ul>
 </li>
<li><a href="#">Francia</a>
 <ul>
  <li><a href="#">Paris</a></li>
  <li><a href="#">Lille</a></li>
  <li><a href="#">Metz</a></li>
</ul>
</li>
</ul>

Questo è ciò che vedremo dopo il primo passo.
Abbiamo una lista non ordinata con 5 voci principali ognuna delle quali contiene delle sottovoci.

Secondo passo:

A questo punto tramite l'id assegnato all'elemento <ul> e che abbiamo chiamato "menu_a_2livelli" cominciamo a formattare la lista:

ul#menu_a_2livelli{
float: left;
margin: 0;
padding: 0;
border-top: 1px solid #D76120;
border-bottom: 1px solid #D76120;
border-left: 1px solid #D76120;
background: #2D4E6C;
list-style:none;
font:1em Trebuchet MS;
}	
ul#menu_a_2livelli li ul li{
list-style:none;
margin:0;
padding:0;
}
ul#menu_a_2livelli li{
float:left;
margin: 0;
padding: 0;
border-right: 1px solid #D76120;
color:black;
}

Questo è ciò che vedremo dopo il secondo passo.
La proprietà list-style-type:none ci consente di non visualizzare i punti elenco e le proprietà margin:0; padding:0; di azzerrare rispettivamente i margini e il padding dell'elemento li. Invece, grazie alla proprietà float:left; disponiamo gli elementi sotto forma di una barra orizzontale. Tutti gli altri stili sono stati usati a scopo decorativo.

Terzo passo:

A questo punto diamo uno stile ai link:

ul#menu_a_2livelli a:link,
ul#menu_a_2livelli a:visited{
display: block;
padding: 4px 16px;
color: #fff;
text-decoration: none;
}
ul#menu_a_2livelli a:hover,
ul#menu_a_2livelli a:focus,
ul#menu_a_2livelli a:active{
background-color: #D76120;
color: #FFFFFF;
text-decoration: none;
}

Questo è ciò che vedremo dopo il terzo passo.
Abbiamo assegnato il padding per distanziare gli elementi di lista tra di loro, e fatto in modo che i link non venissero sottolineati attraverso la proprietà text-decoration:none.

Quarto passo:

A questo punto l'unica cosa da fare è quella di nascondere i sottomenu quando non sono attivati. La regola da scrivere è la seguente:

ul#menu_a_2livelli li ul{
display: none;
}

Questo è ciò che vedremo dopo il quarto passo.

Quinto passo:

L'ultima regola serve per fare apparire i sotto-menu ogni volta che con il puntatore del mouse ci posizioniamo su una delle voci principali.

ul#menu_a_2livelli li:hover ul{
display: block;
position: absolute;
z-index:1;
width:130px;
padding: 0;
margin: 0 0 0 -1px;
border:1px solid #D76120;
background: #2D4E6C;
font-size:.8em;
}
ul#menu_a_2livelli li li {
border-bottom:1px solid #D76120;
width: 130px;
}

Questa regola ci consente di applicare la pseudo-classe :hover agli elementi della sotto-lista che devono essere "visibili". Quindi alla sotto lista e ai suoi elementi applichiamo la proprietà display: block; e li posizioniamo in modo assoluto rispetto al loro elemento contenitore. Inoltre, specificando lo z-index, facciamo in modo che siano sempre in primo piano.
Ma come detto in precedenza tale tecnica non farà apparire il menu a tendine con IE 6.0 e precedenti. Quindi, se visualizzate l'esempio con Internet Explorer 6.0 o precedenti il menu non aprirà la cosidetta tendina quando col puntatore del mouse ci posizioneremo sopra una delle voci principali.
Per ovviare a tale baco è necessario utilizzare la tecnica sperimentata da Edwards. Vediamo come fare:

A questo punto bisogna rendere la pagine compatibili con IE7 e pertanto bisogna inserire nella sezione <head>…</head> un commento condizionale che verrà letto solo da Internet Explorer:

<head>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]><script src="/IE7/ie7-standard-p.js" 
type="text/javascript"></script><![endif]-->
<link rel…… />
</head>

Se avete seguito attentamente le seguenti istruzioni il menu a due livelli funzionerà correttamente anche con Internet Explorer 6.0 e precedenti.
Ecco il risultato finale.

torna su

Risorse in rete

Internet Explorer 7 [link esterno]
Sul sito della Microsoft è disponibile la versione beta 2 di Internet Explorer 7.

IE7 [link esterno]
Un insieme di complesse librerie sperimentate dallo sviluppatore inglese Dean Edwards a supporto dei bachi presentati dal browser Internet Explorer.

Pure CSS menus [link esterno]
Contributo offerto da Eric Meyer sulla realizzazione di un menu a tendine basato solo sui CSS.

torna su

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]