Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Menu espandibile

Link copiato negli appunti

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;
;
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

;

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.


Ti consigliamo anche