Nell'articolo odierno verrà affrontato il tema della navigazione a più livelli, altrimenti chiamata "navigazione con sottovoci" oppure "flyout menu" in un sito web responsive. L'ispirazione mi è venuta capitando nel sito Marchetti Design. Ho trovato un articolo che mostra un menu responsive e che fa uso di pochissimo codice Javascript. Ho chiesto all'amministratore di poter partire dal suo script per arrivare al seguente tutorial. Grazie ad Andrea Marchetti.
Per realizzare un menu responsive ci sono tante soluzioni in merito. Una delle più utilizzate sono le select, che troviamo nei form. Non discutendo il metodo, nel merito le trovo poco usabili, soprattutto in presenza di menu a più livelli.
Faccio presente che per la realizzazione del menu, e relative sottovoci, non è stato utilizzato nessun codice Javascript. Solo codice CSS. Il richiamo al codice JQuery è servito solo per le dimensioni del viewport inferiori al monitor del pc. Il risultato per il desktop è quello riportato in figura, qui di seguito:
Per le versioni smartphone e tablet, avremo:
Le sottovoci, a puro scopo dimostrativo, sono state applicate solo alla voce di menu "Blog". Il tutto si compone di una header e di un elemento contenitore, per le voci di menu, nav. Quando richiameremo la pagina da un device la cui dimensione di schermo sarà inferiore o uguale a 767 pixel, avremo la versione per smartphone. Oltre i 768px,la versione desktop.
Il markup html del menu
<nav role="navigation"> <ul> <li><a href="#">HOME</a></li> <li id="blog"><a href="#">BLOG</a> <ul> <li><a href="#">SOTTO VOCE 1</a></li> <li><a href="#">SOTTO VOCE 2</a></li> </ul> </li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav>
Il codice CSS per formattare Header e Menu
Per l'articolo demo ho creato un solo breakpoint, di conseguenza due visualizzazioni:
- per una dimensione inferiore o uguale a 767 pixel (per smartphone e tablet) avremo la visualizzazione come la seconda immagine
- per una dimensione uguale o superiore ad 768 pixel, avremo il menu per versioni desktop, come la prima immagine
header{
position:relative;
background: navy;
text-align:left;
overflow:hidden;
padding: 20px 0;
}
@media screen and (max-width:767px){
#navigation{display:none;}
}
Fin qui, tutto abbastanza semplice per la header. Per quanto riguarda l'elemento #navigation, esso non deve apparire sugli smartphone e tablet, per cui viene impostato su display: none. Quando siamo su schermi più grandi, si adatterà al resto della pagina.
#navigation{
clear:both;
text-align:left;
margin:0 0 35px;
background:#ddd;
position:relative;
z-index:10;
}
Da notare z-index:10 per l'elemento nav, in quanto vogliamo che stia al di sopra di eventuali elementi che possono succedergli nella pagina. Spesso capita, proprio con menu multi livello, che le sottovoci vengano "nascoste" sotto l'elemento che segue. Lo z-index risolve questo problema.
#navigation ul ul { display: none; }
#navigation ul li:hover > ul { display: block; }
Il secondo menu (ul ul), all'apertura della pagina, non deve essere visibile; anche qui è impostato su display: none. Quando passiamo con il mouse su un elemnto li del menu superiore, contenente sottovoci, deve apparire l'intero menu (display: block).
@media screen and (max-width:767px){
#navigation ul ul {
width: 100%;
position:relative;
display: table;}
}
Per la versione responsive, il sotto-menu deve espandersi per tutta la dimensione del viewport (width:100%).
Il pulsante per gli small-screen. Hamburger menu
Anche se appare come un elemento grafico, il "pulsante", altrimenti detto "hamburger", altro non è che semplice codice CSS. Personalizzabile con colori a seconda delle caratteristiche del sito. Il codice CSS dell'elemento div, che racchiude i 3 span (le 3 linee orizzontali):
.btn-responsive-menu{
display:none;
padding:5px;
cursor:pointer;
color:#fff;
background:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;}
Si noti che anche .btn-responsive-menu è stato impostato su display:none perchè, se il sito viene richiamato da desktop, all'apertura della pagina esso non deve apparire. Per le dimensioni inferiori, assegneremo al pulsante un display:block perchè quando verrà premuto con il dito, tutta l'area interessata dovrà rispondere all'evento e far aprire il menu.
@media screen and (max-width:767px){
.btn-responsive-menu{
display:block;
position:absolute;
top:20px;
right:20px; }
}
Le 3 linee orizzontali, altro non sono che elementi span, così formattate:
.icon-bar {
display:block;
width: 20px;
height: 3px;
margin: 5px;
background-color: #f4421a;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;}
Il codice Javascript da inserire nella pagina HTML
Affinchè il menu responsive risponda all'evento e faccia apparire il menu, ci si deve avvalere dell'ormai inseparabile richiamo al file JQuery. Esso va posto tra i tag <head> </head> della pagina:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Successivamente, si deve richiamare l'elemento nav, al quale abbiamo assegnato un ID univoco:
<script>
$(document).ready(function(){
//When btn is clicked
$(".btn-responsive-menu").click(function() {
$("#navigation").toggleClass("show");
});
});
</script>
L'esempio completo del menu responsive in azione. Restringere ed allargare la finestra del browser per vedere il menu per smartphone o desktop.
Conclusioni
Ho implementato il menu del tutorial in un sito di produzione. Non ho riscontrato nessun tipo di problema, configurandolo opportunamente alle diverse dimensioni dei device. Adottando la soluzione di realizzarlo solo con i CSS, mi sembra un menu molto leggero, per la versione desktop, senza fare uso di Javascript. Con questo secondo articolo, inerente la navigazione responsive, abbiamo due varianti da poter implementare in un sito. Entrambi, credo, molto usabili.