Presentiamo in questo tutorial un semplice menu espandibile opera di Travis Beckham, famoso in rete per il suo sito Squidfingers.com. Si tratta dell'ennesimo esempio di menu basati sull'uso di liste annidate nella struttura HTML, fondati sui CSS per la presentazione e su Javascript per gli aspetti legati alla dinamicità. Separazione dei livelli, dunque, che consente di modificare e personallizarre il menu senza toccare lo script, ma agendo solo sul'HTML per le voci che lo compongono e sul foglio di stile per la formattazione relativa a font e colori.
Allegato al tutorial il pacchetto zip menuesp_dl.zip, che risulta così composto:
- esempio.html - la pagina dell'esempio;
- stilemenu.css - il foglio di stile contenente le regole di formattazione del menu;
- expandingMenu.js - il Javascript che gestisce il menu.
L'implementazione è delle più semplici. Nella sezione <head> andremo a inserire i richiami al foglio di stile e allo script:
<link rel="stylesheet" type="text/css" href="stilemenu.css" />
<script type="text/javascript" src="expandingMenu.js"></script>
Nella parte HTML creeremo una struttura come questa:
<ul id="menu">
<li>Siti HTML.it
<ol>
<li><a href="http://css.html.it">CSS</a></li>
<li><a href="http://javascript.html.it">Javascript</a></li>
<li><a href="http://grafica.html.it">Grafica</a></li>
</ol>
</li>
<li>Menu Item 2
<ol>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
<li><a href="#">Sub Item 2.3</a></li>
</ol>
</li>
<li>Menu Item 3
<ol>
<li><a href="#">Sub Item 3.1</a></li>
<li><a href="#">Sub Item 3.2</a></li>
<li><a href="#">Sub Item 3.3</a></li>
</ol>
</li>
<li>Menu Item 4
<ol>
<li><a href="#">Sub Item 4.1</a></li>
<li><a href="#">Sub Item 4.2</a></li>
<li><a href="#">Sub Item 4.3</a></li>
</ol>
</li>
</ul>
Nell'esempio, troviamo una lista non ordinata (<ul>) principale. Ciascun item della lista (<li>) racchiude una sottolista del tipo <ol> (lista ordinata). Nulla impedisce di usare liste non ordinate come sottoliste. L'importante, nel caso si operi questa scelta, è modificare di conseguenza il CSS, sostituendo il riferimento a ol con ul.
Come si vede il codice HTML risulta pulito, di facile comprensione e soprattutto mantenibile. L'unica cosa da ricordare sempre usando questo script è di dare alla <ul> principale un id="menu". Lo script, infatti, usa proprio questo id come riferimento per applicare il suo funzionamento:
menus = getChildrenByElement(document.getElementById("menu"));
Ottima la compatibilità. Il menu funziona su tutti i browser recenti con supporto del DOM.
