Come realizzare un menu responsive con i soli CSS

Avete mai provato a visualizzare un sito web non ottimizzato per cellulari dal vostro smartphone? Sicuramente non deve essere stata un’esperienza di navigazione molto piacevole, dal momento che sarete stati costretti a “scrollare” continuamente a destra e sinistra per visualizzare i contenuti. Questo fastidioso inconveniente non esisterebbe se il sito in questione fosse stato ottimizzato per la versione mobile. Al giorno d’oggi è infatti possibile ovviare al problema grazie al responsive web design (RWD).

Che cos’è il responsive web design? Si tratta di una tecnologia che consente di progettare siti web in grado di adattarsi graficamente ai dispositivi usati per visualizzarli (cellulari, tablets, smartphones etc..), facendo quindi in modo che i contenuti si adeguino alle diverse risoluzioni e offrendo all’utente un’esperienza di navigazione comoda e piacevole.

 
Dopo aver chiarito in breve in cosa consiste l’RWD e a cosa serve, torniamo allo scopo dell’articolo odierno, che spiegherà come realizzare un menu responsive con l’utilizzo dei soli CSS.

Lo scheletro HTML del nostro menu

Iniziamo con lo strutturare il nostro menu, in questo caso una lista che racchiude al suo interno due sotto liste.

<ul id="menu"> 
  <li><a href="http://">Home</a></li>
  <li><a href="http://">Project</a></li>
  <li><a href="http://">Service</a>
    <ul class="hidden"> 
      <li><a href="http://">Service 1</a></li>
      <li><a href="http://">Service 2</a></li>
      <li><a href="http://">Service 3</a></li>
    </ul>
  </li>
  <li><a href="http://">Support</a></li>
  <li><a href="http://">FAQ</a>
    <ul class="hidden"> 
      <li><a href="http://">Question 1</a></li>
      <li><a href="http://">Question 2</a></li>
      <li><a href="http://">Question 3</a></li>
      <li><a href="http://">Question 4</a></li>
      <li><a href="http://">Question 5</a></li>
    </ul>
  </li>
  <li><a id="donate" href="http://">Donate</a></li>
</ul>

 

CSS: resettiamo lo stile della lista

Dopo aver creato lo scheletro di base, non resta che iniziare ad utilizzare i CSS. La prima cosa da fare è il classico reset dello stile della lista. In seguito, disponiamo uno accanto all’altro gli elementi del menu principale per rendere la lista orizzontale.

/* reset stili */

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* lista orizzontale */

#menu li {
  display: inline-block;
  position: relative;
}

 

Lo stile del menu primario

Il codice seguente servirà per lo più a dare un’impronta grafica al menu primario, ed è quello da modificare nel caso in cui voleste personalizzare la navbar.

/* menu */

#menu {
  width: 100%;
  background-color: black;
  background: -webkit-linear-gradient(#444, #111); /* safari an chrome*/
  background: -moz-linear-gradient(#444, #111); /* firefox*/
  background: -o-linear-gradient(#444, #111); /* opera */
  background: linear-gradient(#444, #111);
  border: 1px solid #222;
  border-radius: 6px;
  box-shadow: 1px 1px 4px #777;
  text-align: center;
}

/* links */

li a {
  display: block;
  padding: 12px 20px;
  width: 60px;
  color: #999;
  text-transform: uppercase;
  font: bold 0.7em Arial, Helvetica;
  text-decoration: none;
  text-shadow: 0 1px #000;
  border-right: 1px solid #222;
  box-shadow: 1px 0 #444;
}

/* rimuoviamo il bordo e l'ombreggiatura dall'ultimo link del menu */

#donate {
  border: none;
  box-shadow: none;  
}

/* links hover */

a:hover {
  color: #C8C8C8;
}

 

Lo stile dei menu secondari

Occupiamoci ora dello stile dei menu secondari.

/* sub menu */

#menu li .hidden {
  display: block;
  position: absolute;
  top: 100px;
  left: 0;
  background-color: black;
  opacity: 0;
  filter:Alpha(opacity=0) /* IE8 and earlier */
  visibility: hidden;
}

/* links sub menu */

#menu li .hidden li a {
  width: 100px;
  border-bottom: 1px solid #202020;
  border-right: none;
  box-shadow: none;
}

 

L’animazione degli elementi al passaggio del cursore

Infine, creiamo un’animazione per il passaggio del cursore sopra agli elementi del menu.

/* menu hover */

#menu li:hover .hidden {
  margin-top: -65px;
  opacity: 1;
  filter:Alpha(opacity=100); /* IE8 and earlier */
  -webkit-transition: all 0.5s ease; /* safari and chrome */
  -moz-transition: all 0.5s ease; /* firefox */
  -o-transition: all 0.5s ease; /* opera */
  transition: all 0.5s ease;
  visibility: visible;
}

 

Le media queries

La barra di navigazione per la versione desktop è ultimata. A questo punto dobbiamo renderla responsive, iniziando con l’avvalerci delle media queries. Tramite questo codice il nostro menu si adatterà ai dispositivi più piccoli, fino ad una risoluzione con larghezza massima di 768 px.

@media only screen and (max-width: 768px) {
  
#menu {
  background: none;
  border: none;
  border-radius: 0;  
  box-shadow: none;
  text-align: center;
  display: none;  
}
  
/* rendiamo gli elementi dei menu elementi di blocco */  
  
ul li {
  display: block;
}
  
/* impostiamo la larghezza massima per gli elementi dei menu e i links */  
  
ul li, ul li a {
  padding-right: 0;
  padding-left: 0;
  width: 100%;
}
  
#menu li .hidden li, #menu li .hidden li a {
  width: 100%;
}

/* rendiamo visibili gli elementi del sub menu solo al passaggio del mouse */  
  
#menu li .hidden li {
  display: none;
}
 
#menu li:hover .hidden li {
  display: block;
}  

/* aumentiamo la grandezza dei links */ 
  
li a {
  font: bold 0.9em Arial, Helvetica;
} 
  
/* resettiamo la posizione degli elementi del menu */  
  
#menu li {
  position: static;
}  
  
/* resettiamo la posizione del sub menu e lo rendiamo visibile */  

#menu li .hidden {
  position: static;
  filter:Alpha(opacity=100); /* IE8 and earlier */
  opacity: 1;
  visibility: visible;
}
  
/* rimuoviamo bordo e ombreggiatura dai links del menu */
  
#menu li a {
  border: none;
  box-shadow: none;  
}  
  
/* nessuna animazione al passaggio del mouse */  
  
#menu li:hover .hidden {
  margin: 0;
} 
  
/* rimuoviamo il bordo dai links del sub menu */  
  
#menu li .hidden li a {
  border: none;
}
  
/*diamo un colore di sfondo agli elementi del menu e del sub menu */
  
#menu li {
  background-color: black;
}
  
#menu li .hidden li {
  background-color: #003366;
} 

}

 

Creiamo il pulsante per mostrare e nascondere il menu

Il grosso è fatto. Ciò che resta da fare è aggiungere un pulsante per mostrare e nascondere il menu. Inseriamo quindi questo codice nel file HTML, immediatamente prima della lista principale.

<label for="showMenu" class="showMenu">
  <i class="fa fa-align-justify fa-lg"></i>
</label>
<input type="checkbox" id="showMenu" role="button">

 
Il tag <label> servirà a creare un’etichetta per il checkbox, perchè una volta che ci cliccheremo sopra con il mouse, essa attiverà il pulsante e potremo mostrare o nascondere il menu. È importante che il valore dell’attributo for sia uguale a quello dell’id del checkbox, in modo tale da collegare i due elementi.

Come avrete notato, ho utilizzato un icon font all’interno di <label>, quindi in questo caso è indispensabile integrare la libreria Font Awesome.

Diamo uno stile alla nostra etichetta

/* diamo uno stile al pulsante del menu e nascondiamolo */

.showMenu {
  padding: 10px 0;
  color: white;
  background: #0066FF;
  text-align: center;
  display: none;
}

 
Il checkbox invece andrà nascosto in ogni caso, ed il menu comparirà quando esso verrà selezionato tramite click sull’etichetta.

/* nascondiamo il checkbox */

input[type=checkbox]{
  display: none;
}

/* mostriamo il menu quando il checkbox viene selezionato */

input[type=checkbox]:checked ~ #menu {
  display: block;
}

 
Non resta che rendere visibile l’etichetta nella versione mobile, quindi inseriamo il codice seguente nelle media queries.

/* mostriamo il pulsante del menu */
        
.showMenu {
  display: block;
} 

 
Abbiamo terminato il nostro menu responsive, e tutto senza l’utilizzo di JavaScript.

Download

Live Demo

Potrebbero interessarti anche...