C’è un mio amico che si diletta a creare siti web e poi visto che io sono più esperto di lui mi chiede spesso cosa ne penso.
L’altro giorno ha aggiunto al suo sito un menu che con javascript apriva e chiudeva i sottomenu.
Quando mi ha chiesto: “Cosa ne pensi?” gli ho risposto “Una schifezza. Di grafica è anche bello però è anti accessibile…”.
È vero che ormai tutti i browser hanno javascript sempre abilitato, però c’è chi javascript non ce l’ha ed è molto più intransigente dei normali utenti: i motori di ricerca.
Visto che spesso mi fa delle sfide ho deciso di far vedere come creerei io un menu con questo articolo.
Userò un po’ di HTML, la proprità display di CSS e Javascript, precisamente il DOM e l’evento onclick.
La struttura HTML è molto semplice, anche se deve essere per forza fatta così: ogni menu è una lista ul e i sottomenu hanno un elemento span che fa da loro titolo.
È necessario che l’ul principale abbia un id, il resto viene estrapolato col DOM. Perciò si possono fare infiniti sotto menu.
Ecco un HTML di esempio:
<ul id="miomenu"> <li> <span>Guide</span> <ul> <li> <span>Programmazione</span> <ul> <li>C</li> <li>C++</li> </ul> </li> <li> <span>Web Developing</span> <ul> <li> <span>HTML</span> <ul> <li><a href="cominciare.html">Per cominciare</a></li> <li><a href="tag.html">I tag</a></li> </ul> </li> <li> <span>PHP</span> <ul> <li><a href="interprete.html">L'interprete</a></li> <li><a href="database.html">I database</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="forum.html">Forum</a></li> <li><a href="contattami.html">Contattami</a></li> </ul>
Questo codice è stato validato con successo dal W3C e se lo mettete ora come ora in un browser non è male, basta personalizzarlo un po’ con i CSS. … [Leggi il resto]