Menù responsive, come creare una navbar responsive

In questa lezione realizzeremo un menù responsive utilizzando html5 e css3.

In particolare ad una risoluzione minore o uguale di 768 pixel si vedrà quello che spesso viene definitivo humburger menù, rappresentato da 3 barre orizzontali in un unico quadrato. Ad un risoluzione maggiore di 768 pixel invece si vedrà la navbar regolarmente.

Menù responsive esempio

In questo esempio quindi inseriamo nella pagina html il tag semantico header e creiamo un div header-top dove inseriamo due colonne, una che contiene il logo, l’altra che contiene il menù di navigazione.

Entrambe le colonne flotteranno a sinistra, dunque ho bisogno del clearfix per ripulire dal flusso il tutto.

Nella prima colonna inserisco solo il logo, mentre nella seconda colonna inserisco tutto il menù di navigazione.

<header>
    <div class="header-top container clearfix">

      <div class="logo float-left">
        <img src="img/coding_creativo.png" alt="coding creativo">
      </div>

      <div class="nav-menu float-left">
        <nav>
          <ul>
            <li><a href="#">Alogritmi</a></li>
            <li><a href="#">JavaScript tutorial</a></li>
            <li><a href="#">Tutorial HTML 5</a></li>
            <li><a href="#">Tutorial CSS 3</a></li>
          </ul>
        </nav>
      </div>
 
    </div>
  </header>

Dopo inseriamo, sempre nella pagina html, nella sezione dedicata ai collegamenti CSS, il collegamento a Fontawesome, per utilizzare poi l’icon bars.

Banner Pubblicitario

Menù responsive – creazione del foglio di stile

Adesso programmiamo il CSS in modo da ottenere il risultato desiderato.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

Poi inseriamo le regole per formattare la navbar. Come primo passo togliamo i margini ed il padding a tutti gli elementi html.

Utilizziamo la max-width affinché la larghezza non sia mai maggiore di 1060 pixel e che si adatti ai dispositivi con una larghezza inferiore.

Creiamo la classe float left per assegnarla poi alle 2 colonne e la clearfix per assegnarla al contenitore padre. Coloriamo poi l’header, diamo anche un border-bottom ed un’altezza.

Diamo una larghezza alle due colonne in percentuale (cerchiamo di evitare i pixel).

Centriamo l’immagine in verticale utilizzando il vertical-align, e sistemiamo la navbar, togliendo gli elenchi puntati.

Dopo aver fatto questo, programmiamo le media queries necessarie per realizzare il menù responsive.

Banner pubblicitario

In particolare utilizzeremo l’after per mostrare l’icona bars di Fontawesome.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1060px;
  margin: auto;
}

.float-left {
  float: left;
}

.clearfix::after{
  content: '';
  display: table;
  clear: both;
}

header {
  background-color: rgb(252, 252, 252);
  border-bottom: 1px solid rgb(32, 163, 238);
}

.header-top {
  height: 90px;
  line-height: 90px;
}

.header-top .logo {
  width: 30%;
}

.header-top .logo img {
  padding-left: 10px;
}

.header-top .logo img {
  vertical-align: middle;
}

.nav-menu {
  width: 70%;
  text-align: right;
}

.nav-menu ul {
  list-style: none;
}

.nav-menu ul li {
  display: inline-block;
  padding:0 15px;
}

.nav-menu ul li a{
  text-decoration: none;
  color: #605f33;
  font-size: 20px;
}

.nav-menu ul li a:hover{
  color:  rgb(9, 94, 179);
  text-decoration: underline;
}

@media screen and (max-width:992px){
  .logo img {
    width: 230px;
  }
  .nav-menu ul li a{
    font-size: 18px;
  }
  .nav-menu ul li {
    display: inline-block;
    padding:0 10px;
  }
}

@media screen and (max-width:768px){
  .nav-menu nav{
    display: none;
  }
  .nav-menu::after{
    content: '\f0c9';
    display: block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 20px;
    padding-right: 10px;
  }

}

In alternativa potevamo semplicemente inserire l’icona nell’html e renderla nascosta, come nel prossimo esempio.

Menù responsive – secondo esempio

In questo secondo esempio stiamo inserendo semplicemente l’icona direttamente nell’html.

<header>
    <div class="header-top container clearfix">

      <div class="logo float-left">
        <img src="img/coding_creativo.png" alt="coding creativo">
      </div>

      <div class="nav-menu float-left">
        <i class="fas fa-bars"></i>
        <nav>
          <ul>
            <li><a href="#">Alogritmi</a></li>
            <li><a href="#">JavaScript tutorial</a></li>
            <li><a href="#">Tutorial HTML 5</a></li>
            <li><a href="#">Tutorial CSS 3</a></li>
          </ul>
        </nav>
      </div>

    </div>
  </header>

Nel CSS poi intervengo solo sulla proprietà display, nascondendo e visualizzando l’icona.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1060px;
  margin: auto;
}

.float-left {
  float: left;
}

header {
  background-color: rgb(252, 252, 252);
  border-bottom: 1px solid rgb(32, 163, 238);
}

.header-top {
  height: 90px;
  line-height: 90px;
}

.header-top .logo img {
  vertical-align: middle;
}

.clearfix::after{
  content: '';
  display: table;
  clear: both;
}

.logo {
  width: 30%;
}

.logo img {
  padding-left: 10px;
}

.nav-menu {
  width: 70%;
  text-align: right;
}

.nav-menu ul {
  list-style: none;
}

.nav-menu ul li {
  display: inline-block;
  padding:0 15px;
}

.nav-menu ul li a{
  text-decoration: none;
  color: #605f33;
  font-size: 20px;
}

.nav-menu ul li a:hover{
  color:  rgb(9, 94, 179);
  text-decoration: underline;
}
.nav-menu i {
  display: none;
}
@media screen and (max-width:992px){
  .logo img {
    width: 230px;
  }
  .nav-menu ul li a{
    font-size: 18px;
  }
  .nav-menu ul li {
    display: inline-block;
    padding:0 10px;
  }
}

@media screen and (max-width:768px){
  .nav-menu nav{
    display: none;
  }
  .nav-menu i {
    display: block;
    line-height: 90px;
    padding: 0 10px;
  }

}

In questa lezione abbiamo visto come creare un menù responsive, nella prossima lezione vedremo come visualizzare il menù al click sull’icona dell’hamburger menù.

Lezione precedente: esempi di utilizzo della media query

Lezione successiva: introduzione a flexbox