Olimpo Informatico

[kluster]

I menu a comparsa (in inglese di solido si chiamano dropdown menu o al massimo con animazione fader menu o slide-in menu [tanto per darvi delle chiavi di ricerca su google ]) sono molto carini ed utili da inserire nel proprio template, ma di contro hanno che di solito sono fatti tramite javascript per lo + intrusivo (ossia che se disabilitato non appaiono) e trovano un sacco di problemi in ottica cross-browser.

Vediamo 3 soluzioni che sono o in puro CSS o al massimo con l'aggiunta di qualche riga javascript ma non intrusivo (per farlo digerire a quell'autobus di miseria che in gergo tecnico viene spesso chiamato Internet Explorer). il tutto cercando di garantire accessibilità e compatibilita' su tutti i browser recenti.

1a Soluzione (menu VERTICALE):
Menu a comparsa con uso di liste ordinate (UL) + css + javascript (unobtrusive):


http://javascript.html.it/articoli/leggi/1737/menu-a-comparsa/
ed una demo perfettamente compatibile con IE, Firefox, Opera, Safari e Ns:
http://www.html.it/articoli/1737/slideoutmenu.html
l'idea di questo menu viene da uno script originale di dhtmlgoodies (dove si trovano tra l'altro 2 demo, una con menu disposto lateralmente a destra ed uno disposto a sinistra, ma su html hanno tradotto la spiegazione in italiano.

2a Soluzione (menu VERTICALE):
Menu in puro CSS tramite liste ordinate (UL) + commenti condizionali x IE6


Lo script dei guru A List A Part, tradotto anch'esso in italiano dalla Gdesign:
http://www.gdesign.it/pages/howto/articoli/menuc/menuc.php
e l'esempio
http://www.gdesign.it/pages/howto/articoli/menuc/esempi/horizontal.htm
(lo script ha un piccolo script js interno ma è solo per la gestione dell'over, funziona perfettamente anche senza javascript attivo).
Quindi a parte personalizzare il css, il resto è puro css ed html
A chi interessasse qui c'è lo script originale di A List A Part: Drop-Down Menus, Horizontal Style

3a Soluzione (menu ORIZZONTALE):
Menu a due livelli con i CSS + liste di definizione + commento condizionale + un piccolo js per risolvere una mancata implementazione delle specifice W3C da parte di tutti gli Internet Explorer inferiori alla versione 7:

http://lau.csi.it/realizzare/accessibilita/fogli_di_stile/menuCSS/DueLivelli.shtml
e questa è la demo perfettamente crossbrowser:
http://lau.csi.it/realizzare/accessibilita/fogli_di_stile/menuCSS/risorse/esempio_completo.htm
e questo è il piccolo javascript che serve per renderlo compatibile a tutti gli IE attualmente sul mercato (si attende ansiosi cmq Internet Explorer 8 per mandare a puttane tutto il buon lavoro fatto fino ad ora )
http://lau.csi.it/IE7_0_9/ie7-standard-p.js
Anche qui a parte il markup, tutto è graficamente personalizzabile tramite il CSS