Un menu dinamico in JavaScript: Slinding Menu

In questo articolo vorrei Introdurre e descrivere il funzionamento dello Sliding Menu, un originale sistema di navigazione, con il quale vorrei dare un esempio delle enormi potenzialità che il DOM del W3C, unito al JavaScript, può offrire. Lo script, infatti, si fonda su un esteso uso del DOM W3C e dei metodi e proprietà standard, che come vedremo possono liberare la nostra fantasia per creare applicazioni DHTML veramente accattivanti. Vediamo subito un esempio del menu.

Compatibilità

La compatibilità dello script è necessariamente vincolata al DOM W3C, perciò questo menu funzionerà solo in quei browser che offrono un consistente supporto al DOM, tra cui i principali sono: Explorer 5 (e superiori), Netscape 6 (e superiori).

Lo script non esegue alcuna L'arte dello sniffing: come riconoscere i browser delle proprietà e dei metodi utilizzati, lasciando il compito ai webmasters e alle loro scelte.

Un possibile codice, per determinare se il browser supporta il DOM W3C e reinderizzare l'utente a pagine in cui sarà possibile utilizzare questo Menu, è il seguente:

<SCRIPT type="text/javascript">
d = document
domW3C = (d.getElementById && d.createElement && d.getElementsByTagName &&
    d.getElementsByTagName("HTML") && d.getElementsByTagName("HTML")[0] &&
    d.getElementsByTagName("HTML")[0].firstChild) ? 1 : 0;
if(domW3C) location = "versioneDOMW3C.html"
else location = "versioneNoDOMW3C.html"
</SCRIPT>

Utilizzo

Prima di spiegare i passi da seguire per creare il vostro Sliding Menu, scaricate il file slidingMenu.js (16.2 KB) oppure slidingMenu.js (10.7 KB), una versione identica ma compressa. Inseritelo poi nella head delle vostre pagine:

<SCRIPT type="text/javascript" src="slidingMenu.js"></SCRIPT>

Premesso ciò, possiamo focalizzare l'attenzione sulla gestione dello script.

Definire la Gerarchia del Menu

Il primo passo da affrontare per definire la gerarchia del nostro sistema di navigazione, è quello di creare gli elementi che faranno parte del menu, attraverso l'utilizzo del costruttore d'oggetti Menu, la cui sintassi è:

VoceDelMenu = new Menu(title,URL,back,MyFunctionName)

Nel quale i parametri hanno i seguenti significati:

• title - (stringa) é il "titolo" dell'elemento creato, cioè la stringa
  che viene visualizzata nel menu
• URL - (stringa) l'indirizzo della pagina da caricare una volta scelto l'elemento
• back - (true|false, null di default) se settato a true l'elemento diventa "retroattivo", permettendo di ritornare alla condizione precedente la scelta dell'elemento
• MyFunctionName - (stringa|"no") è il nome della (eventuale) funzione da associare all'elemento. Se è settato a "no", l'elemento non sarà associato ad alcuna funzione.

Nota: La funzione che può essere associata all'elemento può avere al massimo un unico parametro rappresentato proprio dall'URL. Ad esempio la funzione utilizzata negli esempi per lanciare una popup è la seguente:

function pop(URL){
    window.open(URL,"nm","width=350px, height=200px, left=300px, top=100px")
}

Una volta definiti gli elementi del nostro menu, occorrerà stabilire le "parentele" tra loro, in sostanza, se un Menu ne contiene altri e in quel caso quali. Questa operazione è realizzata assegnando la proprietà subMenu definita per ogni elemento. La proprietà, più precisamente è un array che può contenere degli oggetti Menu.

La sintassi per assegnare un subMenu sarà quindi:

VoceDelMenu.subMenu[indice] = VoceDelMenu

In alcune delle demo proposte, ad esempio, la definizione degli elementi del menu e delle loro parentele è realizzata dal seguente codice:

Home = new Menu("H o m e","home.html",true)
    CV = new Menu("C . V .","cv.html",true)
    PortFolio = new Menu("P o r t F o l i o","port.html",true)
    Articoli = new Menu("A r t i c o l i",null,true,"no")
        art1 = new Menu("standard popup",null,true,"no")
            v1 = new Menu("v . 1","v1.html",true)
            v2 = new Menu("v . 2","v2.html",true)
        art2 = new Menu("sniffing","art2.html",true)
        art3 = new Menu("styleSheets","art3.html",true)
    Contattami = new Menu("C o n t a t t a m i","cont.html",null,"pop")

Home.subMenu[0] = CV
Home.subMenu[1] = PortFolio
Home.subMenu[2] = Articoli
    Articoli.subMenu[0] = art1
        art1.subMenu[0] = v1
        art1.subMenu[1] = v2
    Articoli.subMenu[1] = art2
    Articoli.subMenu[2] = art3
Home.subMenu[3] = Contattami

Definire lo Stile del Menu

Per definire tutti gli aspetti grafici dello Sliding Menu, occorre utilizzare il costruttore d'oggetti ContainerMenu, il vero e proprio DHTML-menu, la cui sintassi è:

MyMenu = new ContainerMenu(startingMenu,Hstep,Vstep,delay,launchingFunctionName,
  boxStylesArray,supStylesArray,cenStylesArray,subStylesArray,
  inSupStylesArray,outSupStylesArray,inSubStylesArray,
  outSubStylesArray,clickedSupStylesArray,clickedSubStylesArray)

Nel quale possiamo separare i parametri in due classi: parametri di Struttura e parametri di Stile.

Parametri di Struttura:

• startingMenu - (oggetto Menu) é il riferimento all'oggetto Menu iniziale, cioè l'elemento di partenza dello Sliding Menu
• Hstep - (intero|10 di default) numero di pixels per il passo dello sliding orizzontale.
• Vstep - (intero|1 di default) numero di pixels per il passo dello sliding verticale; sono ammessi anche numeri decimali per rallentare l'animazione (es: 0.5).
• delay - (intero|500 di default) numero di millisecondi tra uno sliding e l'altro.
• launchingFunctionName - (stringa|"no") è il nome della funzione da associare agli elementi dello Sliding Menu per default. Se è settato a "no" (o null), gli elementi non saranno associati ad alcuna funzione.

Parametri di Stile:

Tutti questi parametri sono destinati a definire gli stili degli elementi dello Sliding Menu; sono tutti dello stesso tipo: array di stili, ovvero array i cui elementi sono stringhe costituite da una coppia "stile=valore", che consente la massima libertà possibile per definire la grafica del sistema di navigazione.

Tutti questi parametri dovranno quindi avere la seguente forma:

ArrayDiStili = new Array("stile1=valore","stile2=valore",...)

//o equivalentemente
ArrayDIStili = ["stile1=valore","stile2=valore",...]

La sintassi utilizzata per la coppia "stile=valore" ricalca quella usata per definire attraverso il JavaScript le proprietà dell'oggetto style di un generico elemento.

In Cambiare al volo i fogli di stile troverete una lista piuttosto completa di possibili stili. Passiamo al significato dei parametri:

• boxStylesArray - (ArrayDIStili) stili per la posizione nella pagina dell'intero Sliding Menu (position/left/top)

I prossimi tre sono i principali array di Stili, relativi rispettivamente ai livelli superiori, centrali e inferiori dello Sliding Menu. Devono obbligatoriamente contenere:

1. "position=absolute"
2. width ed height definiti identici
3. un valore per il fontSize
   • supStylesArray - (ArrayDIStili) stili per i livelli superiori.
   • cenStylesArray - (ArrayDIStili) stili per i livelli centrali.
   • subStylesArray - (ArrayDIStili) stili per i livelli inferiori.

Gli ultimi parametri si riferiscono agli stili da applicare agli eventi di mouse:

• inSupStylesArray - (ArrayDIStili) stili per il mouseover sui livelli superiori.
• outSupStylesArray - (ArrayDIStili) stili per il mouseout sui livelli superiori.
• inSubStylesArray - (ArrayDIStili | inSupStylesArray di default) stili per il mouseover sui livelli inferiori.
• outSubStylesArray - (ArrayDIStili | outSupStylesArray) stili per il mouseout sui livelli inferiori.
• clickedSupStylesArray - (ArrayDIStili | null di default) stili per il click sui livelli superiori.
• clickedSubStylesArray - (ArrayDIStili | null di default) stili per il click sui livelli inferiori.

Il codice utilizzato nell'esempio proposto è:

stiliBoxDefault = ["position=absolute","left=0px","top=300px"]

stiliCenDefault = ["position=absolute","width=100px","height=15px","fontSize=9px",
"backgroundColor=#333333","color=#DDDDDD", "fontFamily=Verdana","textAlign=center","cursor=default"]

stiliSupDefault = ["position=absolute","width=100px","height=15px","fontSize=9px",
"backgroundColor=#DDDDDD","color=#333333", "textAlign=center","cursor=default","fontFamily=Verdana",
"borderLeftStyle=solid","borderLeftWidth=1px","borderLeftColor=#333333"]

stiliSubDefault = ["position=absolute","width=100px","height=15px","fontSize=9px",
"backgroundColor=#DDDDDD","color=#333333", "textAlign=center","cursor=default","fontFamily=Verdana",
"borderLeftStyle=solid","borderLeftWidth=1px","borderLeftColor=#333333",
"borderTopStyle=solid","borderTopWidth=1px","borderTopColor=#333333"]

stiliRollIn =["backgroundColor=#CCCCCC","color=yellow"]
stiliRollOut=["backgroundColor=#DDDDDD","color=#333333"]

MioMenu = new ContainerMenu(Home,null,null,null,"no",
stiliBoxDefault,stiliSupDefault,stiliCenDefault,stiliSubDefault,
stiliRollIn,stiliRollOut)

Altre proprietà e metodi

Una volta definito lo Sliding Menu attraverso l'oggetto ContainerMenu, è possibile controllarne degli altri aspetti definendo opportunamente alcune proprietà:

fixedWidth (intero)

Permette di rendere fissa la lunghezza dello sliding Menu. Un esempio che ne mostra la sintassi potrebbe essere:

MyMenu.fixedWidth = 600 //lo Sliding Menu sarà costantemente lungo 600 pixels

minCPUres (intero)

Si riferisce al numero di millisecondi tra due passi consecutivi dell'animazione. Per default è settato a 10. Modificandolo è possibile rallentare o velocizzare lo sliding nei limiti delle capacità del processore dell'utente. Esempio:

MyMenu.minCPUres = 20

subSliding (true | false)

Se settato a false impedisce che i livelli inferiori seguano lo sliding. Per default è settato a true. Esempio:

MyMenu.subSliding = false

Passiamo infine ai metodi:

MyMenu.open()

Il metodo avvia lo Sliding Menu.

MyMenu.close()

Il metodo chiude lo Sliding Menu. Il metodo andrebbe utilizzato solo nel caso si volesse gestire dinamicamente l'apertura e la chiusura del menu.

MyMenu.initialSubItemsLevel(ArrayDiMenu)

Questo metodo consente di inserire inizialmente nello Sliding Menu dei "feedback-Menu", ovvero oggetti Menu che consentano di ritornare indietro nella gerarchia del sistema di navigazione. Il metodo è usato per garantire una continuità nel menu soprattutto in un suo utilizzo in siti strutturati in multi-pagine.

Il parametro passato è, per l'appunto, un array degli oggetti Menu da inserire inizialmente come feedback nel Menu. Importante è l'ordine degli elementi nell'array, che rispecchierà la successione seguita nella creazione dei livelli inferiori. Un esempio che riprende la gerarchia proposta potrebbe essere:

MyMenu.initialSubItemsLevel([Home,Articoli])

Nota: Il metodo initialSubItemsLevel va utilizzato prima del metodo open

Per capire meglio ciò che è stato descritto finora non resta che vedere degli esempi.

Esempi

In quest'ultima sezione non mi resta che mostrarvi una serie di esempi che potranno spiegarvi meglio il funzionamento e la gestione dello Sliding Menu.

• Menu con feedbacks scelti (solo Home) - esempio
• Menu con lunghezza fissa - esempio
• Menu con stili applicati al click e senza sliding inferiore - esempio
• Menu con stili (default/rollover/click) differenti tra i livelli superiori e inferiori - esempio

Mostro Infine qualche esempio di applicazione reale del menu, utilizzandolo dapprima in un "sito" con una struttura a multi-pagina, e in seguito su uno con struttura a frames/iframes:

• Menu - uso con struttura del sito a multipagina - esempio
• Menu - uso con struttura del sito a frames - esempio

Negli ultimi due esempi implemento un meccanismo per far rimanere coerente il menu alla pagina corrente anche in seguito al reload.

• Menu - uso con struttura del sito a frames - esempio
• Menu - uso con struttura del sito a Iframes - esempio