CSS: realizzare una barra di navigazione responsive con i soli CSS

Per creare una barra di navigazione responsive con i soli CSS che potete vedere qui:

Pagina web con barra di navigazione responsive con i soli CSS

Osservando questo esempio nel browser, provate ad alterare la larghezza della finestra, stringendola ed estendendola. Potrete così osservare i cambiamenti della barra di navigazione secondo la dimensione della finestra del browser.

Per creare questa barra di navigazione nella pagina web bisogna scrivere il seguente codice html:

<div>
  <label for="showMenu" class="showMenu">
  <i class="fa fa-align-justify fa-lg"></i>
  Menù
</label>
<input type="checkbox" id="showMenu" role="button">
 <ul id="menu"> 
  <li><a href="http://">Home</a></li>
  <li><a href="http://">LyX</a></li>
  <li><a href="http://">Tutorial</a>
    <ul class="hidden"> 
      <li><a href="http://">Tutorial 1</a></li>
      <li><a href="http://">Tutorial 2</a></li>
      <li><a href="http://">Tutorial 3</a></li>
    </ul>
  </li>
  <li><a href="http://">Guide LyX</a></li>
  <li><a href="http://">Modelli</a>
    <ul class="hidden"> 
      <li><a href="http://">Modello 1</a></li>
      <li><a href="http://">Modello 2</a></li>
      <li><a href="http://">Modello 3</a></li>
      <li><a href="http://">Modello 4</a></li>
      <li><a href="http://">Modello 5</a></li>
    </ul>
  </li>
  <li><a id="donate" href="http://">Contatti</a></li>
</ul>
</div>

Nella pagina web per creare i menù della nostra barra di navigazione basta scrivere all'interno del nostro codice html i nomi dei menù e gli url delle pagine a cui si collegano.
I menù come potete vedere a livello di codice html sono dei semplici elenchi, di cui alcuni annidati.

Dobbiamo usare un file CSS per impostare lo stile della barra di navigazione.

Siccome le proprietà di un elemento definite all'interno file CSS incorporato in una pagina web hanno la priorità rispetto ad eventuali proprietà definite per lo stesso elemento da file CSS esterni (quindi collegati), in questo tutorial opto per incorporare il file CSS.

Quindi per incorporare il file CSS bisogna, all'interno della dell’head della nostra pagina html, digitare la seguente sintassi:

<style type="text/css">

 /* reset stili */

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

/* lista orizzontale */

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

/* menu */

#menu {
  width: 100%;
  background-color: black;
  background: -moz-linear-gradient(#444, #111); /* firefox*/
  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: 150px;
  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;
}
/* sub menu */

#menu li .hidden {
  display: block;
  position: absolute;
  top: 100px;
  left: 0;
  background-color: black;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}

/* links sub menu */

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

#menu li:hover .hidden {
  margin-top: -65px;
  opacity: 1;
  -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;
}
@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;
  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;
} 

}

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

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

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

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

input[type=checkbox]:checked ~ #menu {
  display: block;
}
/* mostriamo il pulsante del menu */
        
.showMenu {
  display: block;
}

</style>

Se vogliamo cambiare l'aspetto della nostra barra di navigazione basta cambiare i colori all'interno della sintassi del nostro file CSS, oppure modificare la lunghezza dei pulsanti della barra di navigazione.