CSS  »  Articoli  »  CSS Menu 

Dopo il Menu dropdown in stile Facebook torniamo a parlare di menu, e in particolare di una tipologia piuttosto recente e in costante diffusione: i mega-dropdown. Ecco le caratteristiche salienti di un mega-dropdown secondo Jakob Nielsen:

• Grandi pannelli bidimensionali divisi in gruppi di opzioni di navigazione
• Scelte di navigazione strutturate attraverso il layout, la tipografia e a volte icone
• Tutto visibile da subito, senza la necessità di scrolling

Nielsen sostiene in Mega Drop-Down Navigation Menus Work Well che i mega-dropdown superano gli svantaggi dei menu dropdown tradizionali e ne raccomanda l'impiego nel web design.

In questo articolo vedremo una possibile implementazione di mega-dropdown con HTML, CSS e Javascript per arrivare ad ottenere una solida base flessibile e facilmente personalizzabile. Vediamo subito l'esempio e il suo screenshot:

Figura 1 - Screenshot dell'esempio

Ho voluto realizzare un menu che sia il più possibile vicino ad un esempio reale di utilizzo (nel caso specifico un sito e-commerce di elettronica) così da mostrare come sia molto più fruibile, compatto e navigabile un mega-dropdown rispetto ad un dropdown tradizionale.

Per implementare una navigazione simile con l'approccio classico sarebbero state necessarie molte più voci di primo livello e/ probabilmente un menu a due sottolivelli.

Sarà chiaro al lettore che i mega-drop down consentono una maggiore strutturabilità della navigazione e risultano particolarmente indicati per menu a molte voci e/o sezioni, ad esempio in siti quali e-commerce, portali e siti Web 2.0. Come per i menu dropdown, sono però necessarie alcune premesse:

• A beneficio degli utenti che navigano con screenreader, dispositivi mobili o browser obsoleti, le voci di primo livello dovranno essere link verso pagine che contengono una navigazione supplementare, e diversa dal menu stesso attraverso la quale è possibile rangiungere ogni sottosezione e pagina.
• Per tutti gli altri utenti è necessario poter fornire la miglior navigabilità possibile e quindi garantire la massima compatibilità cross-browser e un'interazione efficace anche in assenza di Javascript. Quest'ultimo può essere impiegato però per arricchire l'esperienza di navigazione e migliorare l'usabilità del menu.
• I menu megadropdown consentono molta flessibilità nella loro struttura: è importante però che le voci principali e le varie sottosezioni del menu siano correlate e facilmente identificabili.

Detto ciò siamo pronti a procedere con il processo di realizzazione del nostro esempio che attraversa essenzialmente tre fasi: HTML, CSS e Javascript.

Altri articoli

Altre guide

Altre newsletter