Quando si ha un menù di navigazione laterale con molte voci, può essere opportuno suddividerlo in diversi sottomenù. Per siti dal design più elegante è consigliabile optare per una delle tante soluzioni basate su Mootools, che permettono di realizzare dei gradevoli effetti di animazione con estrema semplicità. Se invece non si può o non si vuole ricorrere al Javascript, è comunque possibile realizzare dei sottomenù usando solo il CSS.

Vediamo insieme come fare.
La tecnica consiste nell’annidare diversi elementi lista “<ul>”, come in questo esempio:

<div id=”menu”>

<ul>

<li><a href=”#”>Home page</a></li>
<li><a href=”#”>Esempio 1</a></li>
<li><a class=”extend” href=”#”>Esempio 2</a>

<ul>
<li><a href=”#”>Sottomenu 1</a></li>
<li><a href=”#”>Sottomenu 2</a></li>
</ul>

</li>
<li><a class=”extend” href=”#”>Esempio 3</a>

<ul>
<li><a href=”#”>Sottomenu 1</a></li>
<li><a href=”#”>Sottomenu 2</a></li>
<li><a href=”#”>Sottomenu 3</a></li>
</ul>

</li>

</ul>

</div>

Come possiamo vedere, i sottomenù vengono realizzati inserendo un ulteriore “<ul>” all’interno del corrispondente “<li>” del menù principale.
Esaminiamo ora il codice CSS necessario:

/* Codice per il menù principale */
#menu {
width: 180px;
height: 180px;
float: left;
margin: 10px 0 0 0;
padding: 0;
background: #369;
font: normal 11px verdana;
}

#menu ul {
margin: 0px;
padding: 0px;
margin: 20px 0 0 8px;
list-style: none;
width: 170px;
}

#menu li {
margin : 0;
padding : 0;
position: relative;
float: left;
}

#menu ul li a, #menu ul li a.extend {
padding : 8px;
margin : 0px;
height: 15px;
padding-top: 8px;
padding-bottom: 8px;
width: 150px;
display : block;
text-decoration : none;
color: #fff;
border-bottom: 1px solid #467bbe;
}

#menu ul li a.extend {
background: url(img/freccia.gif) no-repeat right;
}

#menu ul li a.extend:hover {
background: #4B9BC4 url(img/freccia.gif) no-repeat right;
}

#menu ul li a:hover {
background : #4B9BC4;
display : block;
text-decoration : none;
color: #fff;
}

/* Codice per i sottomenù */
#menu ul li ul {
list-style: none;
position: absolute;
left: 158px;
top: 0;
display: none;
width: 170px;
margin-top: 0px;
}

#menu ul li ul li a {
border-left: none;
background: #2f4985;
}

#menu ul li ul li a:hover {
border-left: none;
background: #4B9BC4;
}

#menu ul li:hover ul { display: block; }

Il codice è ovviamente esemplificativo, potete personalizzarlo per adattarlo alla grafica del vostro sito.
E’ importante ricordare che il posizionamento dei sottomenù deve essere assoluto (quindi agite sulle proprietà left/top per regolarne il posizionamento rispetto al menù principale).

Potete vedere il risultato finale cliccando qui.

Compatibilità con IE6
Per poter funzionare con Internet Explorer 6 è necessario un hack: scaricate da qui il file csshover.htc, copiatelo nella directory principale del sito e richiamatelo tramite CSS:

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

Questa modifica è necessaria in quanto IE6 non supporta l’evento :hover per gli elementi lista; senza l’hack i vostri sottomenù non verrebbero quindi visualizzati.

Altri articoli che potrebbero interessarti

• No related posts