CSS: la barra di navigazione orizzontale

Per creare questa barra di navigazione orizzontale:

Nella pagina web bisogna scrivere il seguente codice html:

<div class="topnav">
  <a class="active" href="url_home">Home</a>
  <a href="url_news">News</a>
  <a href="url_contatti">Contatti</a>
  <a href="url_info">Info</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;
    z-index: 1000;
}

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

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
</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.