Menu responsive: 3 approcci

In un design di tipo responsivo le pratiche per costruire i menu di navigazione si possono ridurre a pochi pattern che poi possono essere declinati in vari altri modi. In questo senso intendiamo i pattern funzionali e non estetici: per questi ultimi occorrerebbe un vero catalogo.

Uno degli approcci più veloci da realizzare consiste nel mostrare ogni voce di menu in un elemento che occupi tutta la larghezza dello schermo. Ne risulta un menu a cascata. Per poche voci potrebbe essere una soluzione buona, viceversa potrebbe non essere l’approccio migliore nel caso di menu con sottomenu che appesantiscono la visualizzazione della pagina. Inoltre la gerarchia fra le voci deve risultare chiara anche a livello estetico.

Un’altra tecnica molto in voga è quella di costruire un menu apposito da mostrare sui “piccoli schermi” e costituito da una singola voce che quando attivata dal click del mouse mostra il menu in cascata. Questo tipo di comportamento (il classico effetto toggle) può essere applicato alle voci che contengono sottomenu. In questo caso occorre del codice aggiuntivo e quindi un po’ di JavaScript.

Un terzo approccio prevede di costruire due menu paralleli, uno di questi è in realtà  una select box contenente tutte le voci di menu. Il comportamento responsive è presto spiegato: quando la risoluzione dello schermo è sotto un certo limite viene nascosto il menu originale e mostrata la select box. In questo caso uno dei vantaggi è quello di poter sfruttare i controlli nativi dei device mobili.