Per prima cosa direi di affrontare il discorso della creazione del menù vero e prorpio.
La cosa forse più complessa di tutti i menù ad albero che ho visto finora risiede certamente nella creazione grafica di tali menù.
Se non vogliamo adottare applett java o oggetti in flash la via più logica risulta quella di gestire la creazione del menù utilizzando i layers.
Ragazzi, credetemi se vi dico che ci ho perso veramente dei giorni di lavoro in passato per gestirmi correttamente tutti i layer, la loro creazione dinamica, il posizionamento ancorato e dinamico anch'esso, la visualizzazione e l'ordine di sovrapposizione con gli altri layer e gli altri oggetti all'interno della pagina.
Una gran seccatura!

Ma allora come risolvere?!?!?

Fortunatamente l'HTML nudo e crudo ci fornisce una soluzione!

Avete visto comìè strutturato un menù ad albero?

Non ricorda molto un elenco puntato?

Si, si! Proprio un elenco tipo:

Voce 1         riga 1 voce 1         riga 2 voce 1         ......         riga N voce 1         Sotto-Voce voce 1             riga 1 sotto-voce 1             riga 2 sotto-voce 1             ...             riga N sotto-voce 1             Voce 2         riga 1 voce 2         riga 2 voce 2         ......         riga N voce 2

Allora perchè non usare questa struttura che l'HTML ci mette a disposizione, liberandoci così dell'80% del lavoro?
Il menù dell'esempio diventa:

<ul>         <li><a href="#">Voce 1</a>             <ul>                 <li><a href="#">riga 1 voce 1</a></li>                 <li><a href="#">riga 2 voce 1</a></li>                 <li><a href="#">....</a></li>                 <li><a href="#">riga N voce 1</a></li>                 <li><a href="#">Sotto-Voce voce 1</a>                     <ul>                         <li><a href="#">riga 1 sotto-voce 1</a></li>                         <li><a href="#">riga 2 sotto-voce 1</a></li>                         <li><a href="#">...</a></li>                         <li><a href="#">riga N sotto-voce 1</a></li>                     </ul>                 </li>             </ul>         </li>         <li><a href="#">Voce 2</a>             <ul>                 <li><a href="#">riga 1 voce 2</a></li>                 <li><a href="#">riga 2 voce 2</a></li>                 <li><a href="#">...</a></li>                 <li><a href="#">riga N voce 2</a></li>             </ul>         </li>     </ul>

   

In pratica tutto il menù è contenuto nei TAG UL. Ogni voce poi è composta da un costrutto di tag LI per il nome e UL che contiene i tag LI degli elementi del menù.
Ogni menù può avere più sottomenù annidiati a qualsiasi profondità.

Ricapitolando la struttura del menù è

<UL> definisce l'intero menù         <LI> definisce la prima voce del menù             <UL> raggruppa gli elementi della prima voce del menù                 <LI></LI> rappresenta una voce del menu             </UL> chiude il raggruppamento  degli elementi della prima voce del menù         </LI> chiude la prima voce del menù     </UL> chiude l'intero menu

Bene, a questo punto abbiamo ottenuto un menù ad albero totalmente espanso e che non è possibile gestire. Si tratta ancora di un elenco puntato e non di un menù. Per trasformarlo in menù occorre fare ancora qualche operazione.
Per prima cosa vediamo di inserire le immagini. Non esiste menù ad albero senza le icone delle cartelle e dei file. Vediamo ora come impostare, grazie agli sili, le immagini.

Negli header html andiamo ad inserire il codice di stile:

 

<style type="text/css">         <!--         body     {                 font: .80em verdana, helvetica, sans-serif;                }         ul     {                 list-style: disc url(document.png);                 margin:0;padding:0 2em;             }         li.Menu {                 list-style: square url(closedfolder.png);             }         -->     </style>

Dove
    in body specifichiamo il font che vogliamo usare nel menù e la sua dimensione
    in ul diciamo che il puntatore da ultilizzare è l'immagine doc.gif
    in li.Menu diciamo che il puntatore da ultilizzare è l'immagine closedfolder.png

Assegnamo ora le classi agli elementi HTML

<ul>         <li class="Menu"><a href="#">Voce 1</a>             <ul>                 <li><a href="#">riga 1 voce 1</a></li>                 <li><a href="#">riga 2 voce 1</a></li>                 <li><a href="#">....</a></li>                 <li><a href="#">riga N voce 1</a></li>                 <li class="Menu"><a href="#">Sotto-Voce 1</a>                     <ul>                         <li><a href="#">riga 1 sotto-voce 1</a></li>                         <li><a href="#">riga 2 sotto-voce 1</a></li>                         <li><a href="#">...</a></li>                         <li><a href="#">riga N sotto-voce 1</a></li>                     </ul>                 </li>             </ul>         </li>         <li class="Menu"><a href="#">Voce 2</a>             <ul>                 <li><a href="#">riga 1 voce 2</a></li>                 <li><a href="#">riga 2 voce 2</a></li>                 <li><a href="#">...</a></li>                 <li><a href="#">riga N voce 2</a></li>             </ul>         </li>     </ul>

<ul>         <li class="Menu"><a href="#">Voce 1</a>             <ul class="Sottomenu">                 <li><a href="#">riga 1 voce 1</a></li>                 <li><a href="#">riga 2 voce 1</a></li>                 <li><a href="#">....</a></li>                 <li><a href="#">riga N voce 1</a></li>                 <li class="Menu"><a href="#">Sotto-Voce 1</a>                     <ul class="Sottomenu">                         <li><a href="#">riga 1 sotto-voce 1</a></li>                         <li><a href="#">riga 2 sotto-voce 1</a></li>                         <li><a href="#">...</a></li>                         <li><a href="#">riga N sotto-voce 1</a></li>                     </ul>                 </li>             </ul>         </li>         <li class="Menu"><a href="#">Voce 2</a>             <ul class="Sottomenu">                 <li><a href="#">riga 1 voce 2</a></li>                 <li><a href="#">riga 2 voce 2</a></li>                 <li><a href="#">...</a></li>                 <li><a href="#">riga N voce 2</a></li>             </ul>         </li>     </ul>

Bene bene, siamo riusciti ora a distinguere il tipo di UL, da uno normale ad uno che rappresenta un gruppo di righe. Ma dobbiamo ora specificare in maniera univoca quale UL intendiamo nascondere, altrimenti la nostra funzione nasconderà TUTTI gli UL che raggruppano le righe delle voci!!
Per far questo impostiamo un ID agli UL. Possiamo sbizzarrirci nel creare l'ID e dar sfogo a tutta la nostra fantasia, tanto l'identificativo serve solo ed esclusivamente ad indirizzare la funzione sill'oggetto che vogliamo modificare!
Un bello sfoggio di brillante genialità l'ho dimostrato nell'esempio. L'UL che contiene le righe della Voce 1 l'ho chiamato Voce-1 così come Voce-2 è il gruppo di righe della Voce 2 e così via!

<ul>         <li class="Menu"><a href="#">Voce 1</a>             <ul class="Sottomenu" id="Voce-1">                 <li><a href="#">riga 1 voce 1</a></li>                 <li><a href="#">riga 2 voce 1</a></li>                 <li><a href="#">....</a></li>                 <li><a href="#">riga N voce 1</a></li>                 <li class="Menu"><a href="#">Sotto-Voce voce 1</a>                     <ul class="Sottomenu" id="Sotto-Voce-voce-1">                         <li><a href="#">riga 1 sotto-voce 1</a></li>                         <li><a href="#">riga 2 sotto-voce 1</a></li>                         <li><a href="#">...</a></li>                         <li><a href="#">riga N sotto-voce 1</a></li>                     </ul>                 </li>             </ul>         </li>         <li class="menu"><a href="#">Voce 2</a>             <ul class="Sottomenu" id="Voce-2">                 <li><a href="#">riga 1 voce 2</a></li>                 <li><a href="#">riga 2 voce 2</a></li>                 <li><a href="#">...</a></li>                 <li><a href="#">riga N voce 2</a></li>             </ul>         </li>     </ul>

Perfetto! Ora siamo pronti per il lato javascript del tutorial!!
Vediamo di capire un attimino cosa ci si aspetta dalla funzione.
Come avevo accennato prima il nostro scopo è di sfuttare le potenzialità di una opzione dello stile degli UL, l'opzione "display".
Se imposto questa variabile a "none" l'UL viene chiuso e non mi mostra le righe LI al suo interno.
Al contrario, se la imposto a "block" il menu e tutti i suoi elementi diventano visibili.

Iniziamo allora a chiudere tutti i menù all'apertura delal pagina. Per far questo dobbiamo individuare TUTTI gli UL dei menù ed impostare la proprietà "display" a "none".
Quesa procedura viene svolta dalla funzione collapseALL():

//Chiude tutti i menù     function collapseALL()         {             //NASCONDE IL MENU             //inserisce in una collezione di oggetti tutti i TAG UL del documento             var uls = document.getElementsByTagName("ul");                         //per ogni TAG UL ripete il seguente controllo:             for (i=0;i<uls.length;i++)                 {                        //Se il nome della classe e "Sottomenu" allora imposta "display" a "none".                     if(uls[i].className=="Sottomenu")uls[i].style.display = "none";                 }             //CAMBIA LE ICONE DELLA CARTELLA             //inserisce in una collezione di oggetti tutti i TAG LI del documento             var lis = document.getElementsByTagName("LI");                         //per ogni TAG LI ripete il seguente controllo:             for (i=0;i<lis.length;i++)                 {                        //Se il nome della classe e "Menu" allora imposta "listStyleImage" a "closedfolder.png".                     if(lis[i].className=="Menu")lis[i].style.listStyleImage = "url(closedfolder.png)" ;                 }         }

Semplice no?!

E per farla eseguire automaticamente all'avvio della pagina basta inserirla nella proprietà noload del TAG BODY:

    <BODY onload="javascript:collapseALL();">

Ora concentriamoci sulla funzione che ci consente di far funzionare i menù:

//Mostra/Nasconde i menù     function MostraMenu(IDmenu)         {             //Carico l'oggetto UL che devo modificare             var menu = document.getElementById(IDmenu);                         //Controllo lo stato dell'opzione display             var display = menu.style.display;                         //se lo stato è a "block" la imposta a "none" e vice versa             menu.style.display = (display == "block") ? "none" : "block";             //modifica l'icona a closedfolder.png se display è block, altrimenti la imposta a openfolder.png             menu.parentNode.style.listStyleImage = (display == "block") ? "url(closedfolder.png)" : "url(openfolder.png)";         }

La funzione è pronta, non resta che farla richiamare al click del mouse passando in argomento l'ID del sottomenù che deve azionare.
Per far questo andiamo ad inserire un link nei TAG LI di tipo MENU:

<ul>         <li class="Menu"><a href="javascript:MostraMenu('Voce-1')">Voce 1</a>             <ul class="Sottomenu" id="Voce-1">                 <li><a href="#">riga 1 voce 1</a></li>                 <li><a href="#">riga 2 voce 1</a></li>                 <li><a href="#">....</a></li>                 <li><a href="#">riga N voce 1</a></li>                 <li class="Menu"><a href="javascript:MostraMenu('Sotto-Voce-voce-1')">Sotto-Voce 1</a>                     <ul class="Sottomenu" id="Sotto-Voce-voce-1">                         <li><a href="#">riga 1 sotto-voce 1</a></li>                         <li><a href="#">riga 2 sotto-voce 1</a></li>                         <li><a href="#">...</a></li>                         <li><a href="#">riga N sotto-voce 1</a></li>                     </ul>                 </li>             </ul>         </li>         <li class="menu"><a href="javascript:MostraMenu('Voce-2')">Voce 2</a>             <ul class="Sottomenu" id="Voce-2">                 <li><a href="#">riga 1 voce 2</a></li>                 <li><a href="#">riga 2 voce 2</a></li>                 <li><a href="#">...</a></li>                 <li><a href="#">riga N voce 2</a></li>             </ul>         </li>     </ul>

Il nostro menù è pronto! Se vogliamo possiamo servirlo ai nostri ospiti (web) così, o arricchirlo di funzioni comode come dei tasti per l'apertura e la chiusura simultanea di tutte le voci di menù, comodo se stiamo cercando una voce specifica e non vogliamo impazzire a furia di click!
Partiamo dalla funzione collapseALL() e modifichiamo solo l'impostazione del display, da "none" a "block":

//apre tutti i menù     function expandALL()         {             //MOSTRA I MENU             //inserisce in una collezione di oggetti tutti i TAG UL del documento             var uls = document.getElementsByTagName("UL");                         //per ogni TAG UL ripete il seguente controllo:             for (i=0;i<uls.length;i++)                 {                        //Se il nome della classe e "Sottomenu" allora imposta "display" a "block".                     if(uls[i].className=="Sottomenu")uls[i].style.display = "block";                        }                         //CAMBIA LE ICONE DELLA CARTELLA             //inserisce in una collezione di oggetti tutti i TAG LI del documento             var lis = document.getElementsByTagName("LI");                         //per ogni TAG LI ripete il seguente controllo:             for (i=0;i<lis.length;i++)                 {                        //Se il nome della classe e "Menu" allora imposta "listStyleImage" a "openfolder.png".                     if(lis[i].className=="Menu")lis[i].style.listStyleImage = "url(openfolder.png)" ;                 }                     }

Possiamo inserire queste funzioni in due pulsanti nella pagina:

 

<form>         <input type="button" onClick="javascript:expandALL();" value="Apri Tutti">         <input type="button" onClick="javascript:collapseALL();" value="Chiudi Tutti">     </form>

Ed ora è proprio tutto pronto!

Ricapitolando il codice, lo stesso visibile in azione in questo esempio , sarà:

<HTML>         <HEAD>             <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">             <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">             <META HTTP-EQUIV="EXPIRES" CONTENT="0">             <STYLE type="text/css">                 <!--                 body     {                         font: .80em verdana, helvetica, sans-serif;                        }                         ul     {                         list-style: disc url(document.png);                         margin:0;padding:0 2em;                     }                         li.Menu {                         list-style: square url(closedfolder.png);                     }                 -->             </STYLE>            </HEAD>         <SCRIPT language="javascript">                         //Chiude tutti i menù             function collapseALL()                 {                     //NASCONDE IL MENU                     //inserisce in una collezione di oggetti tutti i TAG UL del documento                     var uls = document.getElementsByTagName("UL");                                         //per ogni TAG UL ripete il seguente controllo:                     for (i=0;i<uls.length;i++)                         {                                //Se il nome della classe e "Sottomenu" allora imposta "display" a "none".                             if(uls[i].className=="Sottomenu")uls[i].style.display = "none";                         }                     //CAMBIA LE ICONE DELLA CARTELLA                     //inserisce in una collezione di oggetti tutti i TAG LI del documento                     var lis = document.getElementsByTagName("LI");                                         //per ogni TAG LI ripete il seguente controllo:                     for (i=0;i<lis.length;i++)                         {                                //Se il nome della classe e "Menu" allora imposta "listStyleImage" a "closedfolder.png".                             if(lis[i].className=="Menu")lis[i].style.listStyleImage = "url(closedfolder.png)" ;                         }                 }                         //apre tutti i menù             function expandALL()                 {                     //MOSTRA I MENU                     //inserisce in una collezione di oggetti tutti i TAG UL del documento                     var uls = document.getElementsByTagName("UL");                                         //per ogni TAG UL ripete il seguente controllo:                     for (i=0;i<uls.length;i++)                         {                                //Se il nome della classe e "Sottomenu" allora imposta "display" a "block".                             if(uls[i].className=="Sottomenu")uls[i].style.display = "block";                                }                                         //CAMBIA LE ICONE DELLA CARTELLA                     //inserisce in una collezione di oggetti tutti i TAG LI del documento                     var lis = document.getElementsByTagName("LI");                                         //per ogni TAG LI ripete il seguente controllo:                     for (i=0;i<lis.length;i++)                         {                                //Se il nome della classe e "Menu" allora imposta "listStyleImage" a "openfolder.png".                             if(lis[i].className=="Menu")lis[i].listStyleImage = "url(openfolder.png)" ;                         }                                     }                         //Mostra/Nasconde i menù             function MostraMenu(IDmenu)                 {                     //Carico l'oggetto UL che devo modificare                     var menu = document.getElementById(IDmenu);                                         //Controllo lo stato dell'opzione display                     var display = menu.style.display;                                         //se lo stato è a "block" la imposta a "none" e vice versa                     menu.style.display = (display == "block") ? "none" : "block";                                 //modifica l'icona a closedfolder.png se display è block, altrimenti la imposta a openfolder.png                     menu.parentNode.style.listStyleImage = (display == "block") ? "url(closedfolder.png)" : "url(openfolder.png)";                 }             </SCRIPT>                 <BODY onload="javascript:collapseALL();">             <TABLE>                 <TR>                     <TD>                         <FORM>                             <input type="button" onClick="javascript:expandALL();" value="Apri Tutti">                             <input type="button" onClick="javascript:collapseALL();" value="Chiudi Tutti">                         </FORM>                     </TD>                 </TR>                 <TR>                     <TD>                         <UL>                             <LI class="Menu"><a href="javascript:MostraMenu('Voce-1')">Voce 1</a>                                 <UL class="Sottomenu" id="Voce-1">                                     <LI><a href="#">riga 1 voce 1</a></LI>                                     <LI><a href="#">riga 2 voce 1</a></LI>                                     <LI><a href="#">....</a></li>                                     <LI><a href="#">riga N voce 1</a></LI>                                     <LI class="Menu"><a href="javascript:MostraMenu('Sotto-Voce-voce-1')">Sotto-Voce1</a>                                         <UL class="Sottomenu" id="Sotto-Voce-voce-1">                                             <LI><a href="#">riga 1 sotto-voce 1</a></LI>                                             <LI><a href="#">riga 2 sotto-voce 1</a></LI>                                             <LI><a href="#">...</a></li>                                             <LI><a href="#">riga N sotto-voce 1</a></LI>                                         </UL>                                     </LI>                                 </UL>                             </LI>                             <LI class="Menu"><a href="javascript:MostraMenu('Voce-2')">Voce 2</a>                                 <UL class="Sottomenu" id="Voce-2">                                     <LI><a href="#">riga 1 voce 2</a></LI>                                     <LI><a href="#">riga 2 voce 2</a></LI>                                     <LI><a href="#">...</a></LI>                                     <LI><a href="#">riga N voce 2</a></LI>                                 </UL>                             </LI>                         </UL>                     <TD>                 </TR>             </TABLE>         </BODY>     <HTML>