Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Menu a comparsa

Coniugare effetti dinamici Javascript e CSS con l'accessibilità
Coniugare effetti dinamici Javascript e CSS con l'accessibilità
Link copiato negli appunti

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.


Ti consigliamo anche