Per un certo periodo, con la crescita di interesse e sensibilità rispetto alle tematiche legate all'accessibilità, è sembrato che Javscript e il cosiddetto DHTML fossero i primi nemici dell'accesso universale al web. La verità, come spesso accade, stava nel mezzo. Non era Javascript il killer dell'accessibilità ma il modo in cui era stato utilizzato.
Oggi è sempre più frequente vedere sviluppatori che cercano di coniugare le potenzialità di questo linguaggio con le esigenze del più vasto numero possibile di utenti. Vanno bene, per esempio, i menu a comparsa, purché il loro contenuto continui ad essere fruibile anche da quegli utenti che per scelta o necessità non possono contare sul supporto di Javascript.
In questo breve articolo presentiamo proprio un esempio di questo tipo: un menu a comparsa (slide out menu) frutto del lavoro di Alf Magne Kalleland di dhtmlgoodies.com. Ecco il semplice esempio che andremo a realizzare.
Rispetto all'originale, abbiamo separato il codice CSS e Javascript dell'esempio. Il pacchezzo zip allegato risulta così composto dai seguenti file:
- slideoutmenu.html
- slideout.js
- slideout.js
La struttura HTML
Come la stragrande maggioranza dei menu moderni e semanticamente strutturati, anche questo si basa sull'usi di liste non ordinate (<ul>) annidate. In pratica, si parte con la lista principale (o contenitore):
<ul id="lista_principale">
........
</ul>
Si definisce il primo item:
<ul id="lista_principale">
<li>
........
</li>
</ul>
E se si vuole creare un sottomenu, si inserisce all'interno di questo item una sottolista:
<ul id="lista_principale">
<li>
<ul id="sottolista_annidata">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ul>
Chiedo venia per la pedanteria, ma per questo tipo di effetti, capire il modo corretto di annidare le liste è fondamentale. Ecco come appare l'HTML del nostro esempio:
<div id="dhtmlgoodies_menu">
<ul>
<li><a href="#">Siti</a>
<ul>
<li><a href="#">Grafica</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">Servizi</a>
<ul>
<li><a href="#">Download</a></li>
<li><a href="#">Webtool</a></li>
<li><a href="#">Font.it</a></li>
<li><a href="#">Corsi</a></li>
</ul>
</li>
<li><a href="#">Forum</a>
<ul>
<li><a href="#">HTML/XHTML</a></li>
<li><a href="#">ASP</a></li>
<li><a href="#">PHP</a></li>
</ul>
</li>
<li><a href="#">Contatti</a></li>
</ul>
</div>
Occhio all'inizio. Ai fini delle creazione del nostro menu è fondamentale che la lista principale sia racchiusa all'interno di un div con id="dhtmlgoodies_menu".
Il nostro menu è per certi versi completo. Volete sapere cosa vede un utente senza supporto di Javascript e CSS. Ecco l'esempio. Il menu è perfettamente fruibile. Ora aggiungeremo la presentazione con i CSS e l'interattività con Javascript.
CSS e Javascript
Al solito, nella sezione <head> andremo a collegare il foglio di stile e il JS esterni:
<script type="text/javascript" src="slideout.js"></script>
<link rel="stylesheet" type="text/css" href="slideout.css" />
E torniamo all'esempio iniziale.
Due parole sullo script slideout.js. Le parti di commento sono state tradotte per vostra comodità in italiano. Vedrete che la sezione a cui eventualmente apportare modifiche è la prima. È una lista di variabili utili a settare le impostazioni di base del menu. Coprono le seguenti funzionalità:
- velocità dell'effetto di comparsa e scomparsa;
- attivazione con il click o con il mouseover;
- larghezza dei sottomenu;
- movimento a destra o sinistra dei sottomenu;
- distanza dei sottomenu dal menu principale.
Veniamo al foglio di stile slideout.css. Contiene una formattazione di base di menu e sottomenu così come concepita dall'autore dello script. A voi il piacere di personalizzarla secondo i vostri gusti. Anche in questo caso il codice è stato commentato in italiano per fornirvi una guida di massima.
