Videotutorial: Come realizzare un menù responsive

Nella progettazione di un sito web responsive un ruolo molto importante è quello svolto dal menù di navigazione, di solito posizionato in modo orizzontale nella header del sito.

In questo video tutorial vedremo come realizzare un menù di navigazione che si adatta alle diverse risoluzioni dello schermo e che, nelle risoluzioni più piccole, si trasforma in un menù a tendina.

In questo modo offriamo all’utente la miglior esperienza di navigazione possibile, indipendentemente dalla risoluzione dello schermo e dal dispositivo che utilizzano per visualizzare il sito web.

Il video tutorial è diviso in 4 parti:

  • introduzione
  • struttura della pagina e del menù
  • stile del menù
  • media query

La caratteristica principale del menù responsive è la creazione di una piccola icona che compare nel momento in cui la nostra risoluzione diventa più piccola di 768px grazie alle media queries settate per i dispositivi mobili (fino a 767px) che permettono di ridichiarare il codice già dichiarato nel foglio di stile principale.

Infine, con un po’ di jquery, dopo aver dichiarato pronto il documento e aver settato alcune variabili, grazie alla possibilità di aggiungere una classe (AddClass) e di rimuovere una classe (RemoveClass), facciamo in modo che il menù sia cliccabile e visibile quando aggiungiamo la classe di menù aperto e nascosto quando invece rimuoviamo la classe di menù aperto.

Ci sono diverse modalità per creare un menù responsive.

In questo esempio utilizziamo il classico, che prevede di far fluttuare la lista delle voci di menù a sinistra in modo che ogni voce occupi il 100% del layout.

menu_responsive

Nel videotutorial non ci soffermiamo sulla parte del codice di Jquery per non dilungarci troppo nel video ma avete la possibilità di scaricare l’esempio e visualizzare il codice per vedere come l’ho utilizzato per rimuovere ed aggiungere la classe del menù aperto.

Download

E voi cosa aspettate?

Realizzate il vostro menù responsive e se avete commenti scriveteci!

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: ,

L'autore

Web designer e front-end developer freelance a partire dal 2013 con l'obiettivo di crescere professionalmente e di affrontare nuove ed entusiasmati sfide. Ho studiato graphic design allo IED di Milano ma mi occupo in particolare di disegnare e sviluppare siti web in Html5 + Css3 e jquery, siti web responsive e con effetto parallasse. Amo anche scrivere e per questo ho anche un mio blog personale che trovate sul mio sito-web.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

8 commenti

  1. Andrea
  2. Solaris
  3. Vincenzo
  4. Akira

Trackback e pingback

  1. Videotutorial: Come realizzare un menù r...
    […] Nella progettazione di un sito web responsive un ruolo molto importante è quello svolto dal menù di navigazione, di …

Lascia un Commento

Current day month ye@r *