Menu responsive con CSS3 e Media Queries, adattabile ad ogni dimensione di media

In un sito web Responsive, uno degli elementi che riveste una grande importanza è il menu di navigazione. Così come tutta la struttura, anch'esso deve adattarsi alla dimensione del tipo di media dal quale viene richiamato il sito.

In rete ci sono moltissime risorse in merito. Alcune si dimostrano poco usabili, altre un po' di più. Cominciamo con l'affrontare la realizzazione di un semplice menu con 4 voci orizzontali, poste nella header della pagina.

Il nostro menu di esempio non prevede, al momento, nessuna implementazione di JQuery. Verrà realizzato solo con i CSS3 e le Media Queries. Solitamente, quasi tutti i siti responsive, si appoggiano al framework JS più utilizzato.

Poniamo il caso di avere 4 voci per la navigazione:

  1. Home
  2. Blog
  3. About
  4. Contact

Il codice HTML per il menu

<nav class="navigation" role="navigation">
<ul>
<li><a href="#" id="home">HOME</a></li>
<li><a href="#" id="blog">BLOG</a></li>
<li><a href="#" id="about">ABOUT</a></li>
<li><a href="#" id="contact">CONTACT</a></li>
</ul>
</nav>

Il codice CSS per il menu

Scrivo prima le dichiarazioni generali della barra di navigazione:

nav.navigation 
{
margin:      0 auto; 
background:  #f4421a;
position:    relative;
}

nav.navigation ul 
{
margin:			0;
padding:		0;
list-style:		none;
overflow:		hidden;
}

nav.navigation 	a 
{
text-decoration:none;
color:              #fff; 
font-size:          1em;
float:              left;
display:            block;
border-bottom:      1px solid #fff;
border-right:       1px solid #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing:    border-box;
box-sizing:         border-box;
text-align:         center;
}

nav.navigation 	a:hover 
{
text-decoration:underline;
}

Da questo momento in poi, tutto il codice CSS riguarderà solo e soltanto le diverse dimensioni dei device. Se nella versione desktop non abbiamo problemi per le 4 voci in orizzontale, non è altrettanto vero per gli smartphone. Invece di "comprimerle", ho pensato di farne vedere 2 per rigo, affiancate.

@media screen and (max-width:650px)
{
nav.navigation { margin: 0 .75em; }
}

@media screen and (min-width: 651px) and (max-width:959px)
{
nav.navigation { margin: 0 1.5em; }
}

@media screen and (min-width: 960px) 
{
nav.navigation { margin: 0 3em; }
}

Creo i margini, destro e sinistro, per l'elemento nav. Stabilisco, inoltre, che fino alla dimensione di 650 pixel, le voci del menu devono essere affiancate a due a due:

@media screen and (max-width:650px)
{
nav.navigation 	a 
{
float:               left;
display:             block;
width:               50%;
height:              40px;
line-height:         40px;
border-bottom:       1px solid #fff;
border-right:        1px solid #fff;
text-align:          center;
-webkit-box-sizing:  border-box;
-moz-box-sizing:     border-box;
box-sizing:          border-box;
}

a#blog, a#contact
{
border-right:	none;
}

a#about, a#contact
{
border-bottom:	none;
}
}

Come si può notare, la lunghezza di ogni voce è stata impostata con una misura pari al 50% del viewport (width: 50%;) proprio perchè non conosciamo l'effettiva dimensione. La dichiarazione successiva, invece, elimina il bordo destro ed inferiore, dalle voci per le quali non è previsto.

@media screen and (min-width: 651px) 
{
nav.navigation 	a 
{
width:            25%;
height:           50px;
line-height:      50px;
border-right:     1px solid #fff;
}

nav.navigation a#contact
{
border-right:		none;
}
}

Quando abbiamo una dimensione del media a partire da 651 pixel in su, la dimensione di ogni singola voce sarà pari al 25% - width: 25% - del viewport (fatto 100% l'area di visualizzazione totale, 100% / 4 = 25%). Inoltre vorrei che sugli schermi più grandi, l'altezza deve essere di 50 pixel height: 50px. Al bordo destro di ogni item, configuro un bordo di colore bianco (border-right: 1px solid #fff).

Per vedere il menu responsive in azione, è sufficiente restringere la finestra del browser. Si noterà la sovrapposizione e l'affiancamento delle voci del menu, quando la dimensione della finestra del device è inferiore o uguale a 650 pixel. Altrimenti avremo il menu disposto in orizzontale.

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