
Una delle peculiarità di javascript è proprio quella di riuscire a fare le cose in maniera semplice ed elegante. Nell'esempio che segue costruiremo un menù a scomparsa utile ed elegante allo stesso tempo.
Iniziamo con il nostro tipico :
<!--
Quindi dichiariamo la nostra funzione:
if (document.getElementById) {
questoMenu = document.getElementById(menuCorrente).style
if (questoMenu.display == "block") {
questoMenu.display = "none"
}
else {
questoMenu.display = "block"
}
return false
}
else {
return true
}
}
-->
</script>//
Abbiamo, in questo modo, detto al browser fare in modo che se il menù a discesa è aperto deve essere chiuso e viceversa. Quindi un po' di formattazione con il CSS
<style type="text/css">
.menu {display:none; margin-left:20px}
</style>
Adesso l'HTML
<h3>
<a href="pagina1.html" onclick="return mostraMenu('menu1')">Primo menù </a>
</h3>
<div id="menu1" class="menu">
- <a href="pagina01.html">pagina1</a><br/>
- <a href="pagina02.html">pagina2</a><br/>
- <a href="pagina03.html">pagina3</a><br/>
</div>
<h3>
<a href="pagina2.html" onclick="return mostraMenu('menu2')">Secondo menù </a>
</h3>
<div id="menu2" class="menu">
- <a href="pagina01.html">pagina1</a><br/>
- <a href="pagina02.html">pagina2</a><br/>
- <a href="pagina03.html">pagina3</a><br/>
</div>
<h3>
<a href="pagina3.html" onclick="return mostraMenu('menu3')">Contatti</a>
</h3>
<div id="menu3" class="menu">
- <a href="mailto:tuamail@hotmail.it">Contatti</a><br/>
</div>
L'unico limite ai vostri menù,come al solito è solo ed unicamente la fantasia.
Come al solito buon lavoro e C.I.P (copia, incolla, prova)



