|
|
|
08/10/2005 - 13:20 (Categoria: Javascript) Menu a comparsa con categorie e sottocategorie. Lo script consente la gestione di un menu a comparsa: 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. Ideale per una progettazione a frame della pagina. Lo script funziona in tutti i browser recenti che supportano il DOM (Document Object Model) e l'identificazione degli elementi della pagina con l'istruzione getElementById. E' quindi compatibile con Internet Explorer, Firefox, Netscape 6, Mozilla, Safari, Opera. L'effetto č ottenuto con una combinazione di HTML, Javascript e CSS (fogli di stile). Da inserire nella sezione HEAD della pagina:
<script language="JavaScript" type="text/JavaScript">
<!--
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>
<style type="text/css">
.menu {display:none; margin-left:20px}
</style>
Nella sezione BODY della pagina (dove vogliamo mettere il menu):
<h3>
<a href="pagina1.html" onclick="return mostraMenu('menu1')">Lazio</a>
</h3>
<div class="menu" id="menu1">
Roma<br>
Latina<br>
Rieti<br>
Frosinone<br>
Viterbo
</div>
<h3>
<a href="pagina2.html" onclick="return mostraMenu('menu2')">Campania</a>
</h3>
<div class="menu" id="menu2">
Napoli<br>
Avellino<br>
Benevento<br>
Caserta<br>
Salerno
</div>
[...] e cosi' via per tutte le voci del menu che si vogliono inserire. Nella sezione BODY troviamo il tag 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. Ovviamente il tag H3 puo' essere sostituito con un qualsiasi altro tag html (elenco, immagine, paragrafo, etc...). L'attributo HREF contiene un collegamento (pagina1.html, pagina2.html, etc... ) ad una pagina che deve contenere i link del sottomenu Lazio, Campania, etc.... Questa pagina non verra' richiamata se il browser del visitatore ha abilitato il supporto per i JavaScript, e verra' eseguito cio' che si trova nell'istruzione successiva onclick; ma se il browser del visitatore NON ha abilitato il supporto per i JavaScript l'istruzione successiva contenuta in onclick non verra' eseguita, lo script quindi non funzionera' e non saranno visibili i contenuti del sottomenu. In questo caso la presenza della pagina (pagina1.html, pagina2.html, etc... ) nell'attributo href ovviera' a questo inconveniente. La funzione mostraMenu() passa il parametro ('menu1') prima, ('menu2') poi, e cosi' via per quante voci si avranno nel menu. Il parametro (menu1) passato da questa funzione e' l'elemento cruciale dello script: menu1 č infatti l'id (identificativo) con cui abbiamo designato il sottomenu corrispondente a questa voce del menu e che abbiamo collocato all'interno del tag DIV. Per un corretto funzionamento dello script, dunque, bisognerą far corrispondere il parametro passato con dalla funzione mostraMenu() nel link all'id del sottomenu da attivare. Il resto del lavoro e' svolto dall'attributo class="menu", che richiama la classe menu che abbiamo definito nel CSS (foglio di stile STYLE) nell'HEAD della pagina. Questo foglio di stile potra' avere tutte le regole di formattazione che si vuole (nell'esempio abbiamo messo il margine sinistro a 20 px di distanza dal bordo), ma deve necessariamente contenere una regola, la proprietą display deve essere impostata su none (cioe' nessuna, alias nascondi). Per non dover ricopiare su tutte le pagine sempre lo stesso foglio di stile (pensate se poi vorreste effettuare anche una piccola modifica al foglio di stile su quante pagine dovreste farla), e' possibile crearlo su un file esterno, e richiamarlo nella pagina. Per far cio' basta sostituire nell'HEAD al tag STYLE (e a quanto in esso contenuto) il seguente tag: <link href="http://www.NOME_DOMINIO/Nome_foglio_di_stile.css" rel="stylesheet" type="text/css"> Un po' di tecnicismo... Questa parte non e' strettamente necessaria per l'utilizzo dello script; spiega solamente come lavora la funzione mostraMenu. La funzione mostraMenu testa innanzitutto il supporto del DOM (Document Object Model) nel browser: if (document.getElementById) Quindi si assegna alla variabile questoMenu lo stile del menu corrente. Se la proprietą display č settata su 'none' (menu nascosto), lo script mostra il menu sostituendo il valore 'none' con 'block'; se la proprietą display č invece settata su 'block', lo script nasconde il menu impostandola su 'none'. Torna indietro
AVVERTENZA: |
|
Home Chi siamo? Scrivici!
Copyright © 1998-2006 Wowarea