Tra le varie problematiche emerse con il web design reattivo, o adattivo che dir si voglia, c’è innanzitutto quella di garantire un facile accesso ed operatività del menu di navigazione.
Ogni voce del menu stesso deve essere facilmente azionabile, cosa che in una visualizzazione normale (zoomata “out”) della pagina nel caso in cui questa non sia reattiva può diventare pressoché impossibile.
Una soluzione pratica e gradevole graficamente, poiché per niente intrusiva, è quella di nascondere il menu normale raggiunta una certa dimensione della viewport e fare apparire un menu in forma di pulsante, con o senza etichetta.
Si consideri ad esempio questa pagina creata apposta per il tutorial, quindi molto essenziale.
Il contenitore di base ha larghezza pari a 960px; nel momento in cui la viewport scende sotto tale dimensione – ovvero, in termini di media query, ha larghezza massima di 959px – il contenitore stesso occupa tutto lo spazio disponibile.
Il menu di base, che è orizzontale, non viene immediatamente sostituito poiché resta facilmente accessibile fino a quando la viewport non raggiunge una dimensione quantificata in 640px (breakpoint): a quel punto, appare il menu adattivo.
Per realizzare quanto sopra è stato utilizzato un plugin per jQuery chiamato SlickNav – Responsive Mobile Menu Plugin for jQuery che ha il pregio di essere facile da impiegare e da personalizzare.
Dopo avere scaricato il pacchetto dal sito del plugin (vedi sotto), copiamo il file jquery.slicknav.js (o il corrispondente minimizzato, anche se il “peso” in Kb è molto modesto) in una cartella chiamata ad esempio /js ed il file slicknav.css in una cartella chiamata /css.
Nel codice di pagina inseriremo dunque nella sezione <head>:
…
<!– Viewport tag and properties –>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”/>
<!– /Viewport tag and properties –>
…
(come sempre quando vogliamo che i dispositivi mobili eseguano le media query basandosi sulla propria risoluzione della viewport invece di zoomare), poi:
…
<!– css –>
<link href=”css/style.css” rel=”stylesheet” type=”text/css”>
<link href=”css/slicknav.css” rel=”stylesheet” type=”text/css”>
<!– /css –>
<!– jQuery e plugin –>
<script src=”js/jquery.js”></script>
<script src=”js/jquery.slicknav.js”></script>
<script>
$(function(){
$(‘#menu’).slicknav();
});
</script>
<!– /jQuery e plugin –>
Il foglio style.css è quello di base della nostra pagina mentre slicknav.css è quello specifico del plugin.
Nella sezione body avremo il codice del menu:
<nav id=”menuNavigazione”>
<ul id=”menu”>
<li><a href=”#”>Prima voce</a></li>
<li><a href=”#”>Seconda voce</a></li>
<li><a href=”#”>Terza voce</a></li>
<li><a href=”#”>Quarta voce</a></li>
<li><a href=”#”>Quinta voce</a></li>
</ul>
</nav>
che viene formattato dal foglio di stile secondo le regole che preferiamo. Si noti che #menu è l’ID assegnato all’elenco non ordinato che costituisce il menu ed è specificato nel codice javascript che inizializza il plugin:
<script>
$(function(){
$(‘#menu’).slicknav();
});
</script>
Nel foglio di stile, dobbiamo innanzitutto nascondere il menu adattivo altrimenti apparirebbe insieme a quello di base:
…
.slicknav_menu {
display: none;
}
…
Una volta individuato il breakpoint in corrispondenza del quale vogliamo sostituire il menu adattivo a quello normale, inseriremo una media query di questo tipo nel foglio di stile:
@media screen and (max-width:640px) {
#menu {
display: none; /* nasconde il menu normale */
}
.slicknav_menu {
display: block; /* mostra il menu adattivo */
}
}
Tramite il foglio di stile slicknav.css è possibile formattare graficamente il menu adattivo, inoltre esistono diverse opzioni da applicare al codice di inizializzazione per inserire o meno l’etichetta, ottenere effetti di easing, ecc. ecc. come mostrato nella pagina del plugin.
Il sito di SlickNav: http://slicknav.com/
I tutorial pubblicati in questo blog sono usati nell’ambito dei corsi di web design organizzati da INSTANT WEBSITES a Vigevano (Pavia).
Puoi leggere tutti idettagli sui corsi stessi in queste pagine:
http://www.instantwebsites.it/corsi.html
http://www.corsidiwebdesignavigevano.it/corsi-di-web-design.php