jQuery Download
In questo tutorial vediamo come creare un basilare menù di navigazione responsive per la gestione nei dispositivi utilizzando jQuery e le Media Queries css per intercettare la risoluzione. Per questo esercizio abbiamo utilizzato le api's di Google per richiamare il file jQuery.min; in alternativa possiamo scaricare l'ultima release dal sito ufficiale jQuery.com cliccando al link sopra.
Disegnare il pulsante
Andiamo a creare il pulsante utilizzando la classe nav-bar e degli span che andremo poi a formattare nel css. Ricordiamo che nella visualizzazione desktop il pulsante non deve essere presente lo settiamo quindi utilizzando l'attributo display:none.
Il menù di navigazione
Utilizziamo una lista elenco per creare il nostro menù di navigazione ricordandoci che questo dovrà scomparire nella visualizzazione mobile e apparire solamente una volta cliccato il bottone nav-mobile.
Come possiamo vedere, nella media che si occupa di intercettare tutti i device con risoluzione inferiore ai 600px di larghezza, andiamo anche a riscrivere la formattazione della lista dal momento che il menù dovrà apparire con un aspetto differente nel telefono occupando tutto lo spazio disponibile.
Il metodo toggleClass() di jQuery
Come possiamo vedere dallo script nel codice sorgente utilizziamo il metodo toggleClass di jQuery, metodo che permette al click di aggiungere e togliere la classe .show al #nav permettendo quindi di visualizzarlo o nasconderlo. La classe show infatti applica al nav l'attributo display:block che sovrascrive il display:none presente nella Media Queries.
Meno indicato l'utilizzo dell'animazione slideToggle che si porta dietro qualche bug nel ritorno alla visualizzazione desktop.
A questo punto non ci rimane che stringere manualmente le dimensioni del nostro browser desktop e verificare da soli. Buon divertimento.