Christian Heilmann è fra i personaggi più noti della scena internazionale per quanto concerne lo sviluppo web con Javascript. È suo il sito Onlinetools.org, una sorta di deposito dei suoi esperimenti più interessanti. In questo breve articolo presentiamo uno degli script lì presenti: YADM.
L'acronimo sta per Yet another dynamic menu. Seguendo la filosofia del Javascript non intrusivo e della separazione tra struttura, presentazione e interazione, consente la creazione di diversi tipi di menu dinamici basati sull'integrazione tra HTML, CSS e Javascript. Per questo appuntamento abbiamo scelto di soffermarci su uno degli esempi proposti: un menu dropdown orizzontale. Ecco l'esempio su cui lavoreremo.
Cosa ci serve
Il file zip allegato contiene, oltre all'esempio, questi file:
- il foglio di stile yadmnojs.css;
- il foglio di stile yadmreldropdown.css;
- lo script/libreria yadm.js;
- l'immagine vertarrow.gif usata nella realizzazione dell'esempio.
Come funziona
Lo script è in grado di trasformare in menu dinamico una serie di liste (anche annidate) definite all'interno del codice HTML. La sua forza sta nel fatto che per cambiare la tipologia, l'aspetto e il funzionamento del menu, è sufficiente intervenire sulla parte HTML (aggiungendo o togliendo qualche classe) e su un CSS ad hoc.
In breve, Javascript si occupa di individuare all'interno del codice HTML una lista (ul) con id="nav" e procede ad assegnare agli elementi della lista e delle eventuali sottoliste una serie di classi. In base a queste, si definisce il comportamento e l'aspetto del menu.
Implementazione
Iniziamo con l'analisi dell'esempio partendo dal markup HTML. Ecco come viene definito il menu:
<ul id="nav">
<li><a href="http://www.html.it">Home</a></li>
<li><a href="#">Siti</a>
<ul>
<li><a href="http://xhtml.html.it/">HTML/XHTML</a></li>
<li><a href="http://css.html.it/">CSS</a></li>
<li><a href="http://xml.html.it/">XML</a></li>
<li><a href="http://javascript.html.it/">Javascript</a></li>
<li><a href="http://grafica.html.it/">Grafica</a></li>
</ul>
</li>
<li><a href="http://blog.html.it/">Blog</a></li>
<li><a href="http://forum.html.it/">Forum</a></li>
<li><a href="#">Servizi</a>
<ul>
<li><a href="http://b2b.html.it/">B2B</a></li>
<li><a href="http://crea.html.it/">Crea</a></li>
<li><a href="http://font.html.it/">Font.it</a></li>
</ul>
</li>
</ul>
Si noti la cosa cruciale: la lista principale deve avere id="nav". Si presti poi molta attenzione al corretto modo di annidare le liste. Ciascuna lista annidata corrisponde al sottomenu che compare al passaggio del mouse su due degli item del menu ('Siti' e 'Servizi').
Ecco cosa otteniamo dopo il primo step.
Iniziamo a lavorare sulla presentazione. Bisogna sempre prevedere, infatti, che una parte degli utenti possa avere Javascript disabilitato. La formattazione CSS di base è contenuta nel foglio di stile yadmnojs.css, che andiamo a richiamare nel modo consueto:
<style type="text/css">
@import "yadmnojs.css";
</style>
Il nostro esempio, a questo punto, appare così.
È il momento di aggiungere la parte dinamica. Collegheremo alla nostra pagina il foglio di stile yadmreldropdown.css e la libreria yadm.js:
<style type="text/css">
@import "yadmnojs.css";
@import "yadmreldropdown.css";
</style>
<script type="text/javascript" src="yadm.js"></script>
Ottenendo il risultato finale.
Personalizzazione
Per personalizzare l'aspetto del menu non è necessario intervenire sul Javascript. Si proceda invece agendo sui due fogli di stile, iniziando magari da quello di base, per poi adeguare quello specifico del menu. In quest'ultimo (yadmreldropdown.css) si trovano regole specifiche per una serie di classi. Non sono definite nel markup HTML, ma assegnate dinamicamente dallo script. Ecco a cosa fanno riferimento:
dhtml: viene applicata alla lista principale (quella conid="nav") e serve a definire l'aspetto e le proprietà di base della lista/menu (la larghezza stessa, per esempio);isParent: viene applicata ad un elementoliche contiene una lista annidata;isActive: viene applicata ad un elementoliche in quel momento mostri una lista annidata;hiddenChild: viene applicata alle liste annidate inizialmente nascoste;shownChild: viene applicata alle liste annidate quando sono rese visibili dal passaggio del mouse sul loro contenitore.
Ulteriori approfondimenti sul funzionamento dello script si trovano sulla pagina di documentazione di Onlinetools.
Un modo molto semplice per provare diverse soluzioni di menu è quello di visitare la pagina degli esempi e di scaricare i file CSS specifici di ciascuno.
