Responsive Nav è uno script molto utile per i webmaster e comodo per gli utenti, per siti web responsive, fa aggiungere facilmente il menu di navigazione idoneo per dispositivi mobili.
Su qualsiasi piattaforma risieda un sito internet anche se non si è esperti di programmazione, anzi, anche se non si sa programmare, realizzare template responsive per il proprio sito internet non è difficile e template gratuiti responsive ve ne sono molti, non è tutto perfetto però, a volte il menu di navigazione che appare nella parte superiore dello schermo di smartphone non è a comparsa ma statico, questo rende il sito web mobile poco usabile e ruba spazio all'above the fold, Responsive Nav è la soluzione a questo, uno script di semplice installazione che permette di avere il menu di navigazione che si apre al tocco e che non infastidisce la navigazione.
Come impostare ed installare Responsive Nav
Sia la configurazione che l'installazione di Responsive Nav sono molto semplici, elementari per webmaster, vi sono anche esempi di utilizzo nell'archivio che si scaricherà, e, chi non è esperto di codice non farà molta fatica, c'è tutta la documentazione necessaria, purtroppo in inglese però anche grazie a questo articolo molto probabilmente riusciranno tutti a mettere il menu di navigazione a comparsa che crea Responsive Nav su siti web mobili/responsive.
Dopo aver scaricato l'archivio dello script, quello che bisogna fare per utilizzare Responsive Nav in pratica, come minimo è:
- Includere prima di
</head>il foglio di stile di Responsive Nav inserendo la riga<link rel="stylesheet" href="responsive-nav.css">, e, sotto una riga inserendo<script src="responsive-nav.js"></script>s'inserirà lo script; - Racchiudere il menu di navigazione del sito web che si vuole rendere a comparsa su dispositivi mobili tramite gli appositi tag richiesti da Responsive Nav, ovvero, prima di
<ul>andrà messo<nav class="nav-collapse">, e, dopo</ul>andrà messo</nav>; - Prima di
</body>bisogna inserire lo snippet che richiama Responsive Nav inserendo nella pagina<script>var nav = responsiveNav(".nav-collapse");</script>.
Ovviamente, come ho già riferito, quanto appena scritto è davvero il minimo per poter trasformare un menu di navigazione normale in un menu di navigazione a comparsa comparsa con Responsive Nav, quando un sito web responsive è visitato con dispositivi mobili o comunque si visualizza in con una risoluzione del monitor bassa.
Per chi poco se ne intende come prima cosa bisogna specificare che l'URL dello script e del CSS che andranno inseriti nella parte alta della pagina possono variare, in questo esempio viene ipotizzato che l'archivio sia stato scaricato (se siete in locale) e/o estratto sul server nella stessa directory dove c'è la pagina che deve avere il menu di navigazione, altrimenti bisogna sistemare l'indirizzo e mettere l'URL relativo od assoluto appropriato.
Concludo l'articolo dicendo nuovamente che nell'archivio di Responsive Nav sono presenti molti esempi per la personalizzazione dello stile e che le possibilità di ottimizzazione sono molte, innanzitutto si può richiamare il codice dello script minificato, il quale non richiede librerie esterne, volendo si può mettere in altri script se si caricano sul sito, il codice CSS inserendolo nel proprio foglio di stile permetterà di evitare un ulteriore richiesta HTTP, ed anche così facendo il menu va molto bene, è stato testato ottimizzando tutto il possibile. Che ve ne pare Responsive Nav, è una valida navigazione per siti web mobili/responsive?
Da qui potete fare il download di Responsive Nav.