Questo script consente la gestione di un classico menu gerarchico ad albero. Si tratta di quei menu che simulano l'aspetto e il comportamento della struttura a cartelle e sottocartelle della finestra Esplora Risorse di Windows. Molte delle implementazioni rintracciabili in rete, infatti, ne riprendono anche la grafica delle icone. Un menu di questo tipo, per il 'risparmio' di spazio sulla pagina che consente, è ideale per strutture complesse e ricche di voci, basate sull'organizzazione in categorie e sottocategorie.
Lo script si compone di una sezione JavaScript, e di un richiamo all'interno delle pagine Web.
- esempio.htm
## 1: LA SEZIONE HTML
Per una migliore comprensione del funzionamento, è opportuno iniziare dalla parte HTML dell'esempio. Visualizzando la pagina ci troveremo di fronte a 3 titoli corrispondenti alle 3 categorie principali del menu: Le guide di HTML.it, Linguaggi, Servizi. A fianco di ciascun titolo è visibile una piccola icona che rappresenta una cartella chiusa. Cliccando sull'icona, si espande il menu corrispondente a quella categoria e saranno visibili i link o ulteriori sottocategorie, anche esse espandibili (nell'esempio troviamo la sottocategoria 'Fogli di stile CSS').
In basso troviamo poi 2 link. 'Espandi tutto' apre tutte le voci del menu con un solo click. 'Chiudi tutto' riporta il menu allo stato iniziale.
Vediamo i punti salienti del codice. Nella parte con le 3 categorie dobbiamo osservare innanzitutto la definizione del titolo principale con l'icona della cartella:
<table cellpadding='1' cellspacing='1'>
<tr>
<td width='16'>
<a id="menuguide" href="javascript:aprichiudi('guidè);"><img src='folder.gif' width='16' height='16' hspace='0' vspace='0' border='0'/></a>
</td>
<td><strong>Le guide di HTML.it</strong></td>
</table>
Si tratta di una tabella con 2 celle (<td>). In quella sinistra trova posto l'icona della cartella chiusa. Come si nota, l'immagine è anche un link, essendo racchiusa all'interno dei tag <a> e </a>. Ci sono 2 cose da osservare:
1. All'elemento <a> si assegna un id ('menuguidè).
2. Il link attiva la funzione Javascript 'aprichiudi', passando come parametro 'guidè. Attenzione. 'guidè è l'id del div sottostante, quello che contiene i link della categoria e che viene mostrato cliccando sull'icona.
Si osservi la corrispondenza tra l'id del link di attivazione ('menuguidè) e quello del div ('guidè). Nel corso dell'esempio questa corrispondenza va mantenuta (come si vede dal codice). Se, insomma, creo un div con id 'linguaggi', il link che lo attiva avrà come id 'menulinguaggi', e così via. Vedremo poi perchè.
Dicevamo la tabella è seguita da un div contenente i link della categoria. È fondamentale che questo div abbia associate alcune regole CSS:
<div id="guide" style="display: none; margin-left: 2em;">
Innanzitutto dovremo impostare la proprietà display su 'nonè (il div deve essere inizialmente invisibile), quindi dare un margine sulla sinistra. Queste regole, definite qui per comodità a livello di codice HTML, possono ovviamente essere inserite in un CSS esterno.
Il resto del codice segue quindi lo schema visto: tabella con titolo della categoria e icona, div con i link. Aprendo l'esempio con un editor come Dreamweaver non sarà difficile modificare e personalizzare il codice in base alle proprie esigenze.
La parte HTML si conclude, come anticipato, con i 2 link atti ad espandere e chiudere con un click tutte le voci del menu. La loro struttura è delle più semplici. Invece di contenere il collegamento ad un file, richiamano le funzioni Javascript 'espanditutto' e 'chiuditutto':
<p><a href="javascript:espanditutto();">Espandi Tutto</a><br />
<a href="javascript:chiuditutto();">Chiudi Tutto</a></p>
## 2: LA SEZIONE JAVASCRIPT
La sezione Javascript è composta dalle 3 funzioni principali. La prima, 'aprichiudi', è quella che si occupa dell'attivazione delle varie voci tramite le icone. Vediamo il codice:
function aprichiudi(item) {
elem=document.getElementById(item);
visibile=(elem.style.display!="none")
prefisso=document.getElementById("menu" + item);
if (visibile) {
elem.style.display="none";
prefisso.innerHTML="<img src='folder.gif' width='16' height='16' hspace='0' vspace='0' border='0'/>";
} else {
elem.style.display="block";
prefisso.innerHTML="<img src='textfolder.gif' width='16' height='16' hspace='0' vspace='0' border='0'/>";
}
}
Il parametro che viene passato alla funzione, come già anticipato, è l'id del div con i link, quello inizialmente nascosto che il click sull'icona renderà visibile. Abbiamo visto come avviene il passaggio del parametro.
L'id del div viene quindi associato alla variabile 'elem' con il metodo DOM document.getElementById:
elem=document.getElementById(item);
La variabile 'visibilè, invece, serve a conservare lo stato del div quando esso è visibile. 'prefisso' ha il compito di tenere traccia dell'id del link con l'icona. Ricordate? Ognuno di questi id era composto dal prefisso 'menù seguito dall'id del div. Tutto trova riscontro nel codice Javascript:
prefisso=document.getElementById("menu" + item);
La funzione si chiude con una semplice espressione condizionale:
if (visibile) {
elem.style.display="none";
prefisso.innerHTML="<img src='folder.gif' width='16' height='16' hspace='0' vspace='0' border='0'/>";
}
Cosa vuol dire? Se il div con i link è visibile, la proprietà display viene settata su none e il div torna invisibile. Inoltre, l'icona torna ad essere quella della cartella chiusa. Se invece il div è nascosto, la funzione provvede a mostrarlo e a mostrare come icona quella della cartella aperta:
else {
elem.style.display="block";
prefisso.innerHTML="<img src='textfolder.gif' width='16' height='16' hspace='0' vspace='0' border='0'/>";
}
Molto semplice il funzionamento delle altre 2 funzioni. 'espanditutto' rintraccia tutti i div contenuti nel documento e imposta il display su block (sono quindi visibili). Al contempo mostra l'icona della cartella aperta:
function espanditutto() {
divs=document.getElementsByTagName("div");
for (i=0;i<divs.length;i++) {
divs[i].style.display="block";
prefisso=document.getElementById("menu" + divs[i].id);
prefisso.innerHTML="<img src='textfolder.gif' width='16' height='16' hspace='0' vspace='0' border='0'/>";
}
}
La funzione 'chiuditutto' è identica alla precedente. La differenza è che il display è riportato su none e che l'icona è quella della cartella aperta:
function chiuditutto() {
divs=document.getElementsByTagName("div");
for (i=0;i<divs.length;i++) {
divs[i].style.display="none";
prefisso=document.getElementById("menu" + divs[i].id);
prefisso.innerHTML="<img src='folder.gif' width='16' height='16' hspace='0' vspace='0' border='0'/>";
}
}
