Come sviluppare un menù responsive in 3 semplici passi

In questo video-tutorial parliamo del menù di navigazione. Il menù è la prima cosa che, restringendo il browser, “si rompe” cioè non rispetta gli stili che abbiamo impostato per il menù nella risoluzione desktop.
Nel momento in cui il menù va a capo, è proprio in quel punto che dobbiamo intervenire con la media query ed inserire il nostro menù responsive.

Nelle versioni desktop è di solito realizzato in questo modo orizzontale nell’header avendo tanto spazio a disposizione.
Mentre nelle versioni più piccole siamo senz’altro limitati dallo spazio che è minore e per questo è importante utilizzare qualcosa di pratico e usabile. Questo è proprio dato dall’utilizza di un’icona che indica la presenza di un menù. Come in questo caso:

Vediamo come realizzare questo menù molto pratico nei cellulari e tablet, anche se ultimamente si sta diffondendo anche nelle versioni desktop quando si vuole dare maggior importanza alle immagini ed ecco quindi che il menù si trasforma in una icona.

Impostiamo il menù nell html con una lista non ordinata.


<nav>

<ul id="nav" class="menu">

<li><a href="#">Homepage</a></li>

<li><a href="#">Chi sono</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">Servizi</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Contatti</a></li>

</ul>

</nav>

Impostiamo il nostro stile del menù e dopo possiamo passare ad inserire la nostra icona nell’html utilizzando il carattere unicode ☰ che rappresenta proprio l’icona del menù
Inseriamola prima della lista non ordinata in questo modo:

<a id="nav-menu" class="nav-menu"></a>☰

Poiché l’icona rappresenta il menù nella versione responsive, dobbiamo dopo aver impostato il nostro stile, renderla non visibile nella versione desktop.
Supponiamo che fino a 768 px ( risoluzione tablet portrait ) il nostro menù icona sia visibile e quindi fino a769px sarà visibile il nostro menù il stile orizzontale con le voci visibili. Per cui

#nav-menu{
float:right;
line-height:40px;
margin-right:10px;
color:#fff;
cursor:pointer;
display:none;

}

Dopodiché possiamo inserire la nostra mediaquery che indica che il menù icona sarà visibile da 0px a 768px per cui in questo caso dobbiamo nascondere il menù classico e visualizzare la nostra icona:

.menu{
float:left;
hoverflow:hidden;
width:100%;
height:0;

}
#nav-menu{
display:block;
}

INSERIMENTO DEL CODICE JQUERY

Adesso dobbiamo far si che al click dell’icona compare a discesa il menu ed al click di nuovo scompare
Prima di inserire il nostro codice jQuery però dobbiamo far si che nello stile della mediaquery il menù classico sia così settato:

.menu{
float:left;
hoverflow:hidden;
width:100%;
height:0;
}

con un’altezza pari a 0 e nascosto; mentre la classe nav-aperto con altezza auto:

.nav-aperto{
height:auto;
}

Inseriamo prima il collegamento alla libreria jQuery dal CDN di Google:
in modo che con il nostro codice jQuery inserito prima della chiusura del tag body.
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.

CONCLUSIONI
Prima di concludere, vi segnalo una risorsa molto utile che mostra numerosi esempi responsive web design che contiene un sacco di esempi sul responsive design, ed una sezione è dedicata alla realizzazione del menù responsive.

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “COME REALIZZARE UN MENU’ RESPONSIVE IN 3 SEMPLICI PASSI”—

Nome *

Email *

Per piacere seguici e metti mi piace:
alederobertis75
info@alessandraderobertis.it
Nessun Commento

Pubblica un commento