CSS: responsive Navbar con Dropdown

---

Per creare la barra di navigazione responsive con Dropdown che potete vedere qui:

Pagina web con responsive navbar Dropdown

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 class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">LyX</a>
  <a href="#contact">Guide LyX</a>
  <div class="dropdown">
    <button class="dropbtn">Modelli 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Modello 1</a>
      <a href="#">Modello 2</a>
      <a href="#">Modello 3</a>
      <a href="#">Modello 4</a>
      <a href="#">Modello 5</a>
    </div>
  </div> 
  <a href="#about">Contatti</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</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.

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">
/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #4CAF50;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
    float: left;
    overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
    font-size: 17px; 
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #555;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #0186ba;
    color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #0186ba;
    color: white;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
    display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
  
  </style>

Dopo per far funzionare correttamente la barra di navigazione bisogna aggiungere un JavaScript. Il codice del JavaScript verrà aggiunto prima della chiusura del tag <head>.

Quindi dovremo scrivere il seguente codice:

<script type="text/javascript">
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>

Se vogliamo cambiare l'aspetto della nostra barra di navigazione basta cambiare i colori all'interno della sintassi del nostro file CSS.