Lo script che presentiamo crea un menu dinamico con una struttura ad albero: quando si clicca su una voce del menu questa verrà espansa dinamicamente, mentre le altre voci saranno compresse.
Il codice è semplicissimo da configurare e non richiede particolari modifiche.
È basato sul DOM ed è, perciò, perfettamente compatibile con Explorer 5.x e Netscape 6.x. Con Navigator 4.x, invece, il menu verrà mostrato nello stato espanso senza possibilità di poterlo chiudere.
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Inseriamo i fogli di stile tra i tag <head> della pagina:
<style type="text/css">
.menutitle {
cursor: pointer;
margin-bottom: 2px;
background-color: #ECECFF;
color: #000000;
width: 140px;
padding: 2px;
text-align: center;
font-weight: bold;
/*/*/border: 1px solid #000000;/* */
}
.submenu {
margin-bottom: 0.5em;
}
</style>
La classe "menutitle" ci serve per determinare lo stile degli elementi del menu di primo livello:
cursor: pointer;
visualizza il puntatore del mouse a forma di mano
margin-bottom: 2px;
imposta la distanza tra gli elementi del menu
background-color: #ECECFF;
rappresenta il colore di sfondo degli elementi del menu
color: #000000;
è il colore del testo del menu
width: 140px;
la largezza dei "rettangolini" del menu
padding: 2px;
l'altezza dei "rettangolini"
text-align: center;
l'allineamento del testo all'interno dei "rettangolini"
font-weight: bold;
lo spessore del testo
border: 1px solid #000000;
il bordino che cirgonda i "rettangolini" (non è visibile con Navigator 4.x)
La classe "submenu" determina lo stile degli elementi del menu di secondo livello:
margin-bottom: 0.5em;
rappresenta la distanza dal sottomenu all'elemento di primo livello successivo
Sempre tra i tag <head>, subito dopo i CSS, inseriamo il seguente codice:
<script type="text/javascript">
if (document.getElementById){
document.write('<style type="text/css">n')
document.write('.submenu{display: none;}n')
document.write('</style>n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu")
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
</script>
Questo codice non ha bisogno di alcuna modifica e può essere lasciato così.
A questo punto, nello spazio della pagina in cui vorremo far comparire il menù, inseriremo questo codice HTML:
<div id="masterdiv">
</div>
All'interno di questo DIV andrà racchiusa ogni voce del menu. È importante non cambiare il nome ID del tag.
Andiamo adesso a esaminare una tipica voce del menu:
<div class="menutitle" onclick="SwitchMenu('sub1')">DIRECTORY_MADRE</div>
<span class="submenu" id="sub1">
- <a href="#">Directory_figlia1</a>
- <a href="#">Directory_figlia2</a>
</span>
La spiegazione del codice è molto semplice.
<div class="menutitle" onclick="SwitchMenu('sub1')">DIRECTORY_MADRE</div>
con questa riga impostiamo la prima "directory madre".
<span class="submenu" id="sub1">
subito dopo inseriamo questo codice. È importante che il nome ID del tag sia uguale all'argomento passato nella funzione SwitchMenu richiamata dalla sua directory madre (in questo caso sub1).
<a href="#">Directory_figlia1</a>
adesso è possibile inserire infinite directory figlie. Per fare ciò basterà scrivere un qualsiasi testo con link.
</span>
ricordiamoci di chiudere il tag <span> aperto in precedenza.
È possibile anche inserire immagini agli elementi del menu invece del testo.
Ecco un esempio di "directory madre" realizzata in questo modo:
<img src="DIRECTORY_MADRE.gif" onclick="SwitchMenu('sub1')"/>
la riga, ovviamente, andrà sostituita a:
<div class="menutitle" onclick="SwitchMenu('sub1')">DIRECTORY_MADRE</div>
Altre modifiche non sono necessarie.
