martedì 14 agosto 2007

Menu a tendina in Javascript

Creare un menu a tendina (drop down menu per gli anglofoni) in Javascript non è niente di trascendentale, tanto che di applicazioni di questo tipo se ne trovano parecchie sui molti siti che offrono collezioni di script.

Quello presentato qui è uno script semplice, ma che può essere utile per imparare (o ripassare) qualche tecnica di programmazione a oggetti in Javascript e altre cose interessanti (credo) come, ad esempio, utilizzare Javascript per aggiungere dinamicamente elementi alle pagine html.

Lo script si chiama QMenu ed è scaricabile dal sito, l'archivio compresso contiene anche alcune pagine dimostrative.

Dovrebbe essere abbastanza facile da utilizzare anche per chi fosse semplicemente interessato al risultato finale, un menu a tendina per il proprio sito, senza preoccuparsi più di tanto dei dettagli di funzionamento.

Installazione

Contenuto di qmenu.zip

  • qmenu.js
  • qmenu.css
  • license.txt
  • cartella esempi

Solo qmenu.js e qmenu.css devono essere installati sul vostro sito e richiamati nel blocco di intestazione (tra i tag <head> e </head>) della pagina dove si vuole far apparire il menu. I super-principianti possono far riferimento al sorgente delle pagine dimostrative (cartelle esempi del pacchetto)

Creare la struttura del menu a tendina

Si inseriscono le seguenti istruzioni tra i tag <body> e </body> della pagina dove si vuole fare apparire il menu a tendina.

<div class="qmenu-main" id="qmenu-main" style="position:relative"></div>

Questo è il contenitore del menu e va inserito nella posizione esatta della pagina dove si vuole visualizzare il menu. E' l'unico tag html che dovrete scrivere, il resto del menu a tendina verrà generato dinamicamente dallo script.

Sempre nel corpo della pagina (anche immediatamente prima di </body> va bene) si inseriscono le istruzioni per creare la struttura del menu. Per esempio

<script type="text/javascript">
var myMenu=new qmenu('qmenu-main');

Si crea l'oggetto principale del menu. Il costruttore riceve come parametro il valore dell'attributo ID del tag div contenitore creato in precedenza.

myMenu.setStyle({
   'width':135,
   'height':25,
   'orientation':0,
   'textColor':'#0000ff',
   'bgColor':'#f3f3f3',
   'mouseOverBgColor':'#00ff00',
   'borderColor':'#a0a0a0'
});

Si impostano le proprietà base degli elementi del menu.

  • width: Larghezza (in pixel)
  • height: Altezza (in pixel)
  • orientation: 0=menu in orizzontale, 1=menu in verticale.
  • textColor: Colore del testo
  • bgColor: Colore di sfondo
  • mouseOverBgColor: Colore di sfondo quando il puntatore del mouse passa sopra l'elemento.
  • borderColor: Colore del bordo.

I valori impostati da setStyle possono essere modificati per ogni singolo elemento del menu. Vediamo prima come aggiungere i singoli elementi, le voci del menu.

myMenu.add('Home','','/','m1');

Parametri del metodo add (nell'ordine)

  • Testo della voce del menu
  • ID dell'elemento padre. In questo caso è vuoto perché stiamo aggiungendo un elemento al primo livello.
  • URL da usare per il link
  • ID dell'elemento del menu. Tutti gli elementi del menu hanno un ID univoco.
Proseguendo
myMenu.add('Prodotti','','prodotti.html','prod');
myMenu.add('Categoria1','prod','categoria1.html','cat1');
mnu=myMenu.add('Categoria2','prod','categoria2.html','cat2');

Si aggiunge un'altra voce (Prodotti) al primo livello del menu, poi si aggiungono due altri elementi passando come secondo parametro l'ID dell'elemento Prodotti (prod). In questo modo Categoria1 e Categoria2 verranno 'appesi' sotto Prodotti.

Il metodo add ritorna sempre un riferimento all'elemento aggiunto. Questo valore di ritorno può essere ignorato oppure memorizzato in una variabile per poter successivamente accedere all'elemento e modificarne le proprietà.

In questo caso il riferimento all'elemento relativo alla voce Categoria2 è salvato nella variabile mnu. Si può quindi scrivere ad esempio

mnu.bgColor='#c0c0c0';

La voce Categoria2 avrà un colore di sfondo diverso da quello impostato con il metodo setStyle all'inizio. Quando si crea la struttura del menu capiterà di dover creare un gruppo di elementi con lo stesso stile. In questo caso sarebbe scomodo modificare le proprietà per ogni singolo elemento.

Basterà usare di nuovo il metodo setStyle in questo modo

myMenu.setStyle({'bgColor':'#99ffff','width':120});
myMenu.add('Prodotto1','cat1','prodotto1.html','prod1');
myMenu.add('Prodotto2','cat2','prodotto2.html','prod2');

Il colore di sfondo e la larghezza impostati da setStyle divengono i valori predefiniti per tutti gli elementi del menu aggiunti successivamente (in questo caso Prodotto1 e Prodotto2).

Una volta finito di creare la struttura, non resta che mostrare il menu con

myMenu.display();
</script>

qmenu.css

Lo stile e la posizione del testo all'interno delle voci del menu sono controllati tramite foglio di stile css.

Quello utilizzato nell'esempio visto finora è il seguente

#qmenu-main div {
   font-family: arial;
   font-size:15px;
   cursor: pointer;
}
.qmenu-inside {
   margin-top:3px;
   text-align: center;
}
.qmenu-inside a{
   text-decoration: none;
}

Chiaramente si può modificare come si vuole. Ad esempio per avere le voci del menu a tendina allineate a sinistra invece che centrate all'interno del proprio elemento, basta rimuovere text-align: center; da .qmenu-inside.

In particolare l'attributo margin-top (sempre in .qmenu-inside) dovrà essere modificato se si cambia l'altezza degli elementi del menu.

Futuri sviluppi

Ci sono diverse possibilità di migliorare la funzionalità dello script

  • Consentire di impostare un'immagine di sfondo variabile al passaggio del mouse sopra l'elemento.
  • Consentire di affiancare un'icona al testo di ogni voce del menu.

Come funziona

Il codice non dovrebbe essere troppo difficile da capire, a meno che non si sia proprio alle primissime armi con Javascript. Spiegarlo tutto riga per riga sarebbe troppo lungo, darò qualche indicazione generale, i commenti ci sono apposta per chi voglia approfondire il discorso.

L'applicazione si compone di due oggetti.

qmenu - Contiene alcune proprietà globali e i metodi per la creazione della struttura del menu a tendina e per il suo funzionamento.

qmenu-item - Contiene le proprietà che determinano lo stile di ciascun elemento (voce) del menu e il metodo per la visualizzazione (expand) degli elementi figli, quelli cioè che appartengono al livello immediatamente sottostante del menu.

Un'oggetto qmenu-item non è mai creato direttamente, viene creato dal metodo add di qmenu ed aggiunto alla proprietà items di qmenu stesso con il proprio ID come chiave.

Ogni oggetto qmenu-item mantiene un riferimento al proprio contenitore (qmenu) nella proprietà menu. La proprietà children è un array che contiene le chiavi (ID) degli elementi figli.

Tutto il codice html è generato dinamicamente. Ogni oggetto qmenu-item si occupa (metodo expand) della visualizzazione degli elementi figli.

Licenza

QMenu è uno script open source distribuito con licenza GNU GPL. E' liberamente utilizzabile e modificabile secondo i termini della licenza.

Nessun commento:

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.