Menù di navigazione responsive: 5 tecniche a cui ispirarsi

responsiveImmagine originale tratta da Fotolia
Tempo stimato di lettura: 2 minuti, 58 secondi
Pubblicato il 25 maggio 2015

Il menù di navigazione è un elemento importante del sito web soprattutto quando parliamo di responsive web design.
È infatti uno di quegli elementi che nella maggior parte dei casi ha bisogno di un design differente quando dobbiamo adattare il sito web a dispositivi più piccoli come tablet e smartphone.
Il menù, implementato nella versione desktop, sia che sia verticale o orizzontale occupa di solito una dimensione larga e dipende dal numero di voci contenute in essa.
Come lo ri-adattiamo in questi casi nella versione smartphone e tablet? Ho realizzato una ricerca per voi e ho raccolto quelli che ritengo siano le soluzioni e gli esempi più belli a cui ispirarsi.

Nella mia ricerca ho notato che le tecniche più utilizzate per adattare il menù nelle versioni smartphone e tablet sono più o meno le stesse. Tutte quante utilizzano la tecnica dell’icona che viene attivata e disattivata con jQuery. Quando viene attivata viene mostrata la lista di voci del menù. Le tecniche utilizzate per mostrare la lista di voci sono diverse. Vediamo quali sono.

MENU COMPARSA LATERALE CON TUTTE LE VOCI IN VERTICALE ( SLIDEBARS )

Questo tipo di menù con quello chiamato “slidedown” è quello più utilizzato nel responsive web design. Negli esempi che vi propongo è utilizzata la stessa tecnica ma con personalizzazioni differenti. Per esempio il modo di scorrimento o slide può essere verticale, dall’alto verso il basso o dal basso verso l’alto; oppure può essere orizzontale da destra verso sinistra o viceversa. Ecco alcuni siti web interessanti che utilizzano questa tecnica:

FABRICK

fabrik

KALIUMTEAM

kaliumteam

DVOTION

dvotion

DMODERN

dmodern

MENU’ CENTRATO CON LE VOCI A TUTTO SCHERMO CON ALTEZZA 100%  DEL VIEWPORT (SLIDEDOWN – SLIDEOUT)

Il menù centrato è detto “slidedown” perché al click dell’icona rivela tutte le liste di voci verticalmente. Anche questi esempi utilizzano lo stesso metodo ma sono differenti tra loro. Il menù ha la stessa altezza della finestra nascondendo il contenuto che c’è sotto.

ALEXIS BERTIN

Bertin

CONTRAST

contrast

ROB DEWINTER

dewinter

FABRICA

fabrica

#3 – MENU’ CENTRATO CON LE VOCI A TUTTO SCHERMO CON ALTEZZA AUTO

Questa tecnica è uguale alla precedente con la differenza che anziché utilizzare l’altezza del menù alta quanto quella della pagina utilizzano un altezza automatica e quindi si allungano esattamente quante sono le voci di menù facendo intravedere il contenuto che è presente sotto di esso.

HAYDENDAWKINS

haydendawkins

ENVINO

envino

MENU COMPARSA LATERALE CON SUB LIVELLO NASCOSTO (MULTILEVEL DROPDOWN)

Questo tipo di menù invece viene utilizzato quando si parla di menù a più livelli. Al click dell’icona vengono mostrate le voci di primo livello mentre le altre rimangono nascoste e attivate ad un ulteriore click della sua voce principale.

DEJURE

dejure

FIRSTSCRIBE

subscribe

MIKI

miki

MENU’ A GRIGLIA (MULTI LAYOUT MENU’)

Infine abbiamo il menù a griglia che è molto bello ed accattivante. Oltre che alle voci di menù utilizza dei box con all’interno le icone che rappresentano la lista di voci. In tal caso le voci ed i box delle voci non sono larghe il 100% della finestra ma il 50% o altra dimensione.

SELENE

selene

Responsivenavigation.net ha realizzato un ottimo tutorial che spiega perfettamente come realizzare questi menù responsive con tecniche diverse. Oppure navnav.co ha raccolto tantissimi altri esempi da cui prendere ispirazione.
In questo esempio viene utilizzato il pull menù che non ho trovato in nessun sito web ma è molto interessante da implementare perché il menù si attiva proprio tirando l’icona del menù.
Infine vi segnalo scotch.io che vi mostra moltissime demo interessanti sulla tecnica da utilizzare per rivelare il menù con diverse posizioni ed effetti.
Quale metodo utilizzi per il menù responsive e quale di questi esempi proposti ti sembrano i più utili ed i più usabili’

  • Sinceramente preferisco il menu classico fisso. In alcuni degli esempi mi sono ritrovato in una home con una foto gigantesca senza sapere cosa fare. A me sembrano tutto fuorché usabili. Il pull menu, oltre che non intuitivo, richiede uno “sforzo” in più all’utente. Mi chiedo, a questo punto, come possano essere navigati questi siti da chi è costretto a usare browser vocali.

    • Marcol83

      Finalmente qualcuno che la pensa come me…
      sempre più grafica ed effetti particolari e purtroppo sempre meno usabilità…

      I miei menu saranno più semplici ma sicuramente sono più intuitivi e quindi funzionali.
      Mentre a scopo didattico trovo l’articolo molto interessante e ricco di spunti.

  • concordo con @danieleimperi:disqus e @marcol83:disqus, l’essere responsive è ormai necessario ma menu del genere sono sempre menu intuitivi e sempre più pacchiani, cosa che il Css3, in tutta la sua maestosità ma in utilizzi non sempre corretti, ha purtroppo favorito trasformando tanti siti in una sorta di videogiochi. l’impronta dell’ormai sorpassato Flash è palese, nessuno lo vuole ma tutti cercano di imitarlo. preferisco anche io una tecnica come quella di Marcol, con menu semplici con qualche leggero effetto di transizione ma sempre alla portata di tutti. menu a parte, trovo anche io l’articolo estremamente interessante e istruttivo

    • Aledero design

      @FUNemploymentIT:disqus non credo si possa parlare di pacchiano usando i css3 per realizzare qualche effetto in più con i menù. Le transizioni ed animazioni dei css3 non hanno niente a che fare con flash e mi sembra poco opportuno fare un confronto tra i due. Io stessa implemento sempre la versione semplice del menù responsive in cui cliccando l’icona compare il menù a tendina con una semplice transizione. Ho solo voluto offrire una carrellata di quello che c’è in giro per far capire dove si può arrivare con i css3. Non per questo devi usarli per forza.

Shares