Lo script che presentiamo consente la gestione di un comodo menu a comparsa. Come si può rilevare eseguendo l'esempio allegato, si tratta di una soluzione ideale per menu laterali in cui ad una categoria principale corrisponde un gruppo di link che rappresentano una sottosezione della stessa. La comodità di questo tipo di menu consiste nell'evidente risparmio di spazio nel layout nella pagina. Dal momento che le voci di menu secondarie vengono mostrate solo quando serve, è possibile raggruppare e inserire diversi item senza timore di creare elenchi lunghi e difficili da consultare. L'effetto è ottenuto con una combinazione di HTML, Javascript e CSS.
Lo script si compone di una sezione JavaScript, e di un richiamo all'interno delle pagine Web.
- esempio.htm
## 1: RICHIAMO INTERNO ALLA PAGINA WEB
Per una migliore comprensione dello script, è opportuno iniziare la nostra analisi dalla sezione HTML della pagina di esempio. Nel corpo troviamo ad un certo punto un elemento <h3> che racchiude un link: si tratta della voce principale del menu. Cliccando su di essa facciamo comparire di sotto le voci secondarie. A menu aperto, basta un altro click per far nuovamente scomparire il sottomenu. Osserviamo come è costruito questo link, avvertendo che l'uso dell'elemento <h3> è puramente casuale, potendo quest'ultimo essere sostituito da altri elementi o da un'immagine. Ecco il codice:
<h3>
<a href="pagina1.html" onclick="return mostraMenu('menu1')">Lazio</a>
</h3>
Nel link l'attributo href contiene un collegamento ad una pagina che idealmente dovrebbe contenere i link del sottomenu. A cosa e a chi serve questo accorgimento? Serve a quelli che navigano con browser senza supporto di Javascript, per i quali lo script non funziona e che non potrebbero pertanto fruire dei contenuti del sottomenu.
Segue l'istruzione Javascript che mostra e fa scomparire il sottomenu, attivata dall'evento onclick. Si tratta di un richiamo alla funzione mostraMenu su cui torneremo più avanti. La chiamata alla funzione è accompagnata dal passaggio di un parametro (menu1). È l'elemento cruciale.
menu1 è infatti l'id con cui abbiamo designato il sottomenu corrispondente a questa voce e che segue immediatamente nel codice:
<div class="menu" id="menu1">
Roma
Latina
Rieti
Frosinone
Viterbo
</div>
Per un corretto funzionamento dello script, dunque, bisognerà far corrispondere il parametro passato con il link all'id del sottomenu da attivare. Lo si comprende meglio osservando come viene costruito il secondo menu:
<h3>
<a href="pagina2.html" onclick="return mostraMenu('menu2')">Campania</a>
</h3>
<div class="menu" id="menu2">
Napoli
Avellino
Benevento
Caserta
Salerno
</div>
Ora si può osservare che i due div, oltre all'id, sono identificati con un attributo class="menu". La classe 'menù viene definita in un CSS che deve sempre accompagnare lo script. Può avere tutte le regole di formattazione che si vuole, ma deve necessariamente contenere una regola: la proprietà display deve essere impostata su none. Ecco il codice:
<style type="text/css">
.menu {display:none; margin-left:20px}
</style>
In questo modo, i menu saranno nascosti al caricamento della pagina e saranno resi visibili solo quando si clicca sulla voce principale. Il resto è compito dello script.
## 2: SEZIONE JAVASCRIPT
Lo script è estremamente semplice e compatto, e non va in alcun modo modificato:
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
}
}
La funzione mostraMenu testa innanzitutto il supporto del DOM nel browser:
if (document.getElementById)
Quindi si assegna alla variabile questoMenu lo stile del menu corrente. Se la proprietà display è settata su 'nonè (menu nascosto), lo script mostra il menu sostituendo il valore 'nonè con 'block'; se la proprietà display è invece settata su 'block', lo script nasconde il menu impostandola su 'nonè. Il supporto dello script è garantito in tutti i browser recenti che supportano il DOM e l'identificazione degli elementi della pagina con l'istruzione getElementById.
