Crea un menu reattivo con il plug-in Responsive-Nav.js

Esistono diversi modi per creare menu di navigazione con funzione responsive, cioè che risponda con tutti i dispositivi su cui è possibile visualizzare il sito web.
Ma il problema è che molti di questi moduli non sono completamente compatibili con alcuni browser se CSS3 viene utilizzato per eseguire questa operazione.
Grazie a Javascript possiamo rendere questo tipo di effetti e animazioni molto più compatibili con i browser e quindi dare loro il supporto necessario.
In questo tutorial vedremo come creare una barra di navigazione completamente reattiva utilizzando il plug-in Javascript Responsive Nav.
Questo plugin è open source e possiamo usarlo in qualsiasi progetto, viene fornito con il suo foglio di stile per poterlo personalizzare ed è totalmente dipendente da altre librerie Javascript come jQuery.
Nell'HTML dovremo solo creare un elenco per utilizzare il menu e dargli un identificatore per poterlo selezionare tramite lo script richiesto dal plugin.
Colleghiamo anche il plugin Responsive Nav e lo colleghiamo al documento, questo può essere scaricato dalla sua pagina ufficiale o direttamente su Github, possiamo scaricare solo il file .js o se vuoi puoi scaricare l'intero file .zip, per questo tutorial Userò solo il file responsive-nav.min.js.
Creiamo un sito web demo che chiamiamo responsive.html

 Navigazione reattiva

Cominciare
Di
Servizi
Blog
Contatto

Lorem ipsum dolore sit amet, consectetuer adipiscing.

Be egestas, ante et vulputate volutpat

Quindi aggiungeremo il css in un file styles.css con il seguente codice

 corpo {margine: 0; imbottitura: 0; sfondo: # 3d3d3d; font-family: Arial, sans-serif; } img {larghezza massima: 100%; } #content {colore di sfondo: # E6E6FA; margine: 20px automatico 0; imbottitura: 20px; larghezza: 80%; } #nav {colore di sfondo: # 4C76AE; } #nav ul {margine: 0; imbottitura: 0; larghezza: 100%; blocco di visualizzazione; stile elenco: nessuno; } #nav ul li {larghezza: 100%; blocco di visualizzazione; stile elenco: nessuno; } #nav ul li a {display: block; imbottitura: 10px 9px; larghezza: 100%; dimensione del carattere: 1.1em; font-weight: normale; sfondo: # 4c76ae; colore: # cad7ea; decorazione del testo: nessuna; } #nav ul li a: hover {background: # 00567f; } .js #nav {clip: rect (0 0 0 0); altezza massima: 0; posizione: assoluta; blocco di visualizzazione; trabocco: nascosto; ingrandimento: 1; } # nav.opened {altezza massima: 9999px; } # nav-toggle {dimensione carattere: 1.2em; font-weight: grassetto; imbottitura: 3px 9px; margine sinistro: 15px; decorazione del testo: nessuna; raggio di confine: 3px; colore: #fefefe; sfondo: # 4c7ab6; margine inferiore: 15px; }

Fino a qui sarà il foglio di stile generale, ora creeremo un foglio di stile che adatterà il menu se lo schermo viene ridotto a 640px o meno, per questo applichiamo alcuni stili all'interno della proprietà Media Queries di css3 che verranno applicati su dispositivi con risoluzione minima a 640px. Se la risoluzione è maggiore, verrà utilizzato il css generale definito.

 @media schermo e (larghezza minima: 640px) {.js #nav {posizione: relativa; } .js # nav.closed {altezza massima: nessuno; } # nav-toggle {display: none; } #nav ul li a {border-right: 1px solid # 5E88BF; blocco di visualizzazione; galleggiante: sinistro; larghezza: automatico; sfondo: nessuno; imbottitura: 11px 15px; font-weight: normale; decorazione del testo: nessuna; colore: # E6E6FA; } #nav ul li a: hover {background: # 00567f; colore: # cad7ea; } h1 {colore: # 90b9a0; dimensione del carattere: 2.5em; allineamento del testo: centro; }}

Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo