Menu ad albero espandibile
Massimiliano Valente - mvalente@tecnet.it
HTML dinamico consente di organizzare i link e mostrare le risorse di un sito in maniera efficace, attraverso i menu espandibili ad albero. Sono sufficienti poche immagini e qualche riga di codice per ottenere un effetto simile ai classici menu dei sistemi Windows
HTML dinamico consente di organizzare i link e mostrare le risorse di un sito in maniera efficace, attraverso i menu espandibili ad albero. Sono sufficienti poche immagini e qualche riga di codice per ottenere un effetto simile ai classici menu dei sistemi Windows
Una presentazione dei dati ordinata e intuitiva è un elemento fondamentale per la riuscita di un buon sito Web. Questo obiettivo si può ottenere in vari modi: per esempio, inserendo motori di ricerca interni. Oppure progettando i menu in modo tale che il visitatore, in ogni momento e in qualsiasi zona del sito si trovi, possa rintracciare ciò che cerca con facilità. Tuttavia, nei siti di grandi dimensioni, dove le aree e quindi le voci di menu, possono essere numerose, l'indicizzazione può diventare problematica. Uno dei rischi, da questo punto di vista, è di trovarsi di fronte elenchi lunghissimi che, oltre a occupare gran parte della pagina, possono risultare di difficile lettura e consultazione.
Una possibile soluzione è rappresentata dai menu espandibili. Con questo termine si definiscono gli elenchi in cui appaiono le voci principali, ognuna delle quali potrà essere espansa mostrando le altre voci dei livelli inferiore. (Le immagini contenute in questo articolo illustrano varie tipologie di questo sistema).
Html classico non consente di utilizzare menu di questo genere a causa della sua staticità. È possibile ottenere un effetto simile con JavaScript, ma solo attraverso un massiccio uso di cookie e del refresh automatico di pagina. In altre parole gli eventi non si verificheranno a pagina completamente scaricata, ma ad ogni refresh, con conseguenti rallentamenti della velocità di esecuzione.
Per le sue caratteristiche Dhtml rappresenta quindi la soluzione più completa per ottenere gli obiettivi indicati in premessa.
Una demo dall'aspetto molto familiare
La demo di questo mese (disponibile nel Cd-Rom allegato) è assolutamente crossbrowser, cioè compatibile sia con Microsoft Internet Explorer sia con Netscape Communicator. In questo modo, sarà così possibile implementare nel proprio sito un menu dinamico espandibile, senza il timore di escludere dalla navigazione gli utilizzatori dell'uno o dell'altro browser.
In questo esempio useremo tre icone la cui veste grafica si rifà ai sistemi Windows:
· chiusa.gif : mostra una cartella contenente altri link e collegamenti, ma non ancora espansa;
· aperta.gif : è la classica icona visualizzata quando una cartella è aperta e mostra il suo contenuto;
· link.gif : l'icona che Windows assegna ai file Html se il browser predefinito è Internet Explorer
Prima di passare al codice della dimostrazione è necessario impostare stile e posizionamento assoluto del menu attraverso un foglio di stile incorporato:
DIV.clTop{position:absolute; width:250px}
Questa riga stabilisce la dimensione orizzontale (width) in pixel dell'area di menu.
DIV.clSub{position:absolute; left:15px; top:25px; width:250px}
ClSub si riferisce ai submenu, cioè le voci di menu visualizzate quando quelle principali sono cliccate ed espanse. Anche in questo caso il posizionamento è assoluto e la larghezza identica a quella vista in precedenza. Il valore left determina la distanza dal margine sinistro rispetto alle voce principale, top la distanza verticale dalla stessa. Agendo su questi due valori è possibile posizionare le voci del sottomenu in vari modi, rispetto ai titoli delle singole voci.
#divCont{position:relative; left:300px; top:0px; height:400px;
width:250px;}
Questa riga definisce il posizionamento all'interno della pagina di tutti gli elementi del menu che quindi, nel nostro caso, distano 300 pixel dal margine sinistro, zero da quello superiore ed hanno una dimensione orizzontale di 250 pixel e verticale di 400. Per spostare in altra posizione il menu è necessario modificare questi valori.
A.clMain{font-family:Arial; font-size:17px; text-decoration:none; font-weight:bold; color:black}
A.clSubb{font-family:Arial; font-size:16px; text-decoration:none; color:black}
Queste due righe di codice stabiliscono rispettivamente lo stile del testo delle voci principali di menu (clMain) e delle voci del submenu (clSubb). Se avremo bisogno di avere voci differenti da quelle impostate nell'esempio, sarà necessario agire su questi valori.
Terminata l'impostazione degli stili di pagina passiamo all'analisi del codice JavaScript grazie al quale si ottiene l'effetto dinamico, punto centrale di questo esempio.
Le righe di codice che seguono immediatamente l'apertura del marcatore <SCRIPT> sono molto importanti ai fini della personalizzazione del menu.
var stayFolded=true
Questo valore settato su true imposta l'opzione per cui le cartelle, quando espanse, non chiudono automaticamente le altre ancora aperte. Il valore settato su false, al contrario, imposta l'opzione per cui può esservi esclusivamente una voce di menu espansa. Le altre verranno invece chiuse automaticamente. La seconda opzione è utile per menu molto estesi che, se completamente espansi, potrebbero creare problemi al layout di pagina. La prima opzione si avvicina a quanto avviene nei sistemi Windows.
var exImg=new Image(); exImg.src='aperta.gif'
var unImg=new Image(); unImg.src='chiusa.gif'
Queste due righe di codice impostano le immagini a corredo di questo esempio. Entrambe sono posizionate alla sinistra delle voci principali del menu. La seconda viene visualizzata quando la voce di menu non è espansa, e viene sostituita dinamicamente dalla prima quando si clicca sulla stessa o sul titolo della voce di menu.
Per sostituire altre immagini alle due impostate in questa demo non si deve far altro che sovrascriverle a quelle esistenti.
Il codice successivo controlla l'accesso alle versioni del browser:
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)
Gli esempi esaminati finora hanno tre voci principali di menu, ognuna delle quali si articola in differenti voci di sottomenu. Il numero di voci non è indipendente dallo script, nel senso che non è possibile aggiungerne altre senza impostare la funzione corrispondente. Stiamo parlando della funzione Init(), che nel nostro esempio contiene il seguente codice:
function init(){
oTop=new Array()
oTop[0]=new makeMenu('divTop1','divCont')
oTop[1]=new makeMenu('divTop2','divCont')
oTop[2]=new makeMenu('divTop3','divCont')
oSub=new Array()
oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')
oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')
Il primo array imposta le tre voci principali, assegnando loro alcuni valori in base a numeri progressivi. Il secondo si riferisce invece alle voci del livello inferiore visualizzate quando gli stessi sono espansi. Per aggiungere nuovi elementi al menu è necessario impostare una nuova riga di codice per entrambi gli array, seguendo la numerazione progressiva della voce di menu immediatamente precedente. Nel nostro esempio, se volessimo aggiungere un quarto titolo al menu il codice andrebbe modificato in questo modo:
function init(){
oTop=new Array()
oTop[0]=new makeMenu('divTop1','divCont')
oTop[1]=new makeMenu('divTop2','divCont')
oTop[2]=new makeMenu('divTop3','divCont')
oTop[3]=new makeMenu('divTop4','divCont')
oSub=new Array()
oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')
oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')
oSub[3]=new makeMenu('divSub4','divCont.document.divTop4')
Impostato lo script, è necessario ora agire all'interno del documento inserendo le relative voci di menu e i link alle risorse.
Riportiamo di seguito soltanto la prima voce del menu e le voci del sottomenu corrispondente:
<div id="divCont">
<div id="divTop1" class="clTop"><a href="#" onclick="menu(0); return false" class="clMain"><img src="chiusa.gif" name="imgA0" alt="" border="0"> PRIMO GRUPPO</a><br>
Questo codice imposta l'icona e il titolo della prima voce di menu. divTop1, menu(0), imgA0 fanno invece riferimento alle funzioni scritte in precedenza e prevedono, per le voci di menu successive, una numerazione progressiva. Il link è costituito da una cella così da poter essere disabilitato mantenendo le caratteristiche degli hyperlink (altrimenti cliccando sul titolo principale lo stesso porterebbe in un'altra pagina).
Il titolo del menu è un semplice file di testo il cui stile è stato impostato nel CSS iniziale.
<div id="divSub1" class="clSub">
<a href=" http://inews.tecnet.it " class="clSubb"><IMG SRC="link.gif" BORDER="0" VALIGN=middle HSPACE=8>Primo link</a><br>
<a href=" http://inews.tecnet.it " class="clSubb"><IMG SRC="link.gif" BORDER="0" VALIGN=middle HSPACE=8>Secondo link</a><br>
<a href=" http://inews.tecnet.it " class="clSubb"><IMG SRC="link.gif" BORDER="0" VALIGN=middle HSPACE=8>Terzo link</a>
Questo codice si riferisce alle sottocategorie ed è identico per tutte le voci del menu. Ogni link richiama la classe clSubb. A ognuno di essi è affiancata un'immagine la cui distanza orizzontale è stabilita dal valore di HSPACE, mentre la posizione rispetto al testo è definita da VALIGN=middle.
|