Responsive flyout menu. Navigazione a più livelli con CSS3 e Mediaqueries

Quale prosecuzione del precedente articolo, nel tutorial odierno verrà affrontato il tema della navigazione a più livelli, altrimenti chiamata "navigazione con sottovoci", 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.

Sono tante le 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 versioni con dimensioni inferiori al monitor del pc. L'immagine di seguito raffigura quanto andremo a realizzare per versioni desktop:

Menu responsive con sottovoci espanse per desktop
1) Menu con voci espanse per versione desktop

Per le versioni smartphone e tablet, avremo la seguente visualizzazione:

Menu responsive con sottovoci espanse per tablet e smartphone
2) Header con pulsante effetto slide-down per versione smartphone e tablet

Le sottovoci, a puro scopo dimostrativo, sono state applicate solo al link "Blog". Il tutto si compone di una header e di un elemento nav. Quando richiameremo la pagina da un device la cui dimensione di schermo sarà inferiore o uguale a 799 pixel, avremo una pagina con la header che racchiude il menu, con il pulsante, nella parte superiore destra, per espandere le suddette sottovoci.

Il codice HTML della Header

<header role="banner">
<h1><a href="#" title="Site Logo">Site Logo</a></h1>
<div class="btn-responsive-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</header>

All'interno della header gli unici elementi che abbiamo, sono il logo ed il codice del pulsante che farà apparire il menu per le versioni smartphone.

Il codice HTML del Menu

<nav id="navigation" role="navigation">
<ul>
<li id="home"><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 id="about"><a href="#">ABOUT</a></li>
<li id="contact"><a href="#">CONTACT</a></li>
</ul>
</nav>

Il codice CSS per formattare header e menu

A solo scopo dimostrativo, ho creato un solo Breakpoint, di conseguenza due visualizzazioni:

  1. per una dimensione inferiore o uguale a 799 pixel (per smartphone e tablet) avremo la visualizzazione come in figura 2
  2. per una dimensione uguale o superiore ad 800 pixel, invece, avremo il menu per versioni desktop, come in figura 1
header
{ 
position:       relative; 
background:     #f4421a;
text-align:     left;
overflow:       hidden;
padding:        20px 0;
}

@media screen and (max-width:799px)
{
header{margin: 0 1.2em;}

nav#navigation
{
display: none;
}
}

@media screen and (min-width:800px)
{
header {margin: 0 3em;}

nav#navigation {margin: 0 3em;}
}

Fin qui, tutto abbastanza semplice per la header. Ho impostato un margine destro e sinistro, a seconda della dimensione del tipo di media. Per quanto riguarda l'elemento nav#navigation, esso non deve apparire sugli smartphone e tablet, per cui viene impostato su display: none. Quando siamo su schermi più grandi, avrà un margine pari a quello della header.

nav#navigation
{
clear:       both; 
text-align:  left;
margin:      0 0 35px;
background:  #f4421a;
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 vengono "nascoste" sotto l'elemento che segue. Lo z-index risolve questo problema.

nav#navigation ul ul { display: none; }

nav#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:799px)
{
nav#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 l'effetto slide down

Anche se appare come un elemento grafico, il "pulsante" 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 il div .btn-responsive-menu è stato impostato su display:none perchè 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:799px)
{
.btn-responsive-menu
{
display:      block;
position:     absolute; 
top:          20px; 
right:        20px; 
}
}

Le 3 lineette 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 posso nella <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>

Il file completo del menu responsive in azione. Provare a stringere ed allargare la finestra del browser perchè appaia o meno il menu.

Conclusioni

Ho implementantato il menu del tutorial in un sito di produzione. Non ho riscontrato nessun tipo di problema, configurandolo opportunamente per le diverse dimensioni di 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.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati