Menù a discesa con javascript

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 :

<script language="Javascript" type="text/javascript">
<!--

Quindi dichiariamo la nostra funzione:

function mostraMenu(menuCorrente) {

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)