Avere una navigazione facile da usare è importante per qualsiasi sito web.

Con i CSS puoi trasformare noiosi menu HTML in barre di navigazione di bell'aspetto.

Barra di navigazione = lista di collegamenti

Una barra di navigazione necessita di HTML standard come base.

Nei nostri esempi costruiremo la barra di navigazione da un elenco HTML standard.

Una barra di navigazione è fondamentalmente un elenco di collegamenti, quindi utilizzare gli elementi <ul> e <li> ha perfettamente senso:

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

Visualizza esempio

Ora rimuoviamo i punti elenco, i margini e il riempimento dall'elenco:

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

Visualizza esempio

Spiegazione dell'esempio

• list-style-type: none; - Rimuove il marcatore dell'elenco puntato. Una barra di navigazione non necessita di marcatori di lista
• Impostare margin: 0; e padding: 0; per rimuovere le impostazioni di default del browser.

Il codice nell'esempio sopra è il codice standard utilizzato sia nelle barre di navigazione verticali che in quelle orizzontali, che vedremo di seguito.

Barra di navigazione verticale

Per creare una barra di navigazione verticale, si può modellare gli elementi <a> all'interno dell'elenco, oltre al codice precedente:

li a {
  display: block;
  width: 60px;
}

Visualizza esempio

Spiegazione dell'esempio

• display: block; - Visualizzare i collegamenti come elementi di blocco rende cliccabile l'intera area del collegamento (non solo il testo) e ci consente di specificare la larghezza (e il riempimento, il margine, l'altezza, ecc. se lo desideri)
• width: 60px; - Gli elementi blocco occupano l'intera larghezza disponibile per impostazione predefinita. Vogliamo specificare una larghezza di 60 pixel.

Si può anche impostare la larghezza di <ul> e rimuovere la larghezza di <a>, poiché occuperanno l'intera larghezza disponibile quando visualizzati come elementi di blocco. Ciò produrrà lo stesso risultato del nostro esempio precedente:

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

li a {
  display: block;
}

Visualizza esempio

Esempi di barra di navigazione verticale

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
}

Visualizza esempio

Collegamento di navigazione attivo/corrente

Aggiungere una classe "active" al collegamento corrente per far sapere all'utente su quale pagina si trova:

.active {
  background-color: #04AA6D;
  color: white;
}

Visualizza esempio

Centrare i collegamenti e aggiungere bordi

Aggiungere text-align:center a <li> o <a> per centrare i collegamenti.

Aggiungere la proprietà border a <ul> per inserire un bordo attorno alla barra di navigazione. Se si vuole anche i bordi all'interno della barra di navigazione, si aggiunge un border-bottom a tutti gli elementi <li>; tranne l'ultimo:

ul {
  border: 1px solid #555;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

li:last-child {
  border-bottom: none;
}

Visualizza esempio

Barra di navigazione verticale fissa a tutta altezza

Creare una navigazione laterale "permanente" a tutta altezza:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Full height */
  position: fixed; /* La rende permanente anche durante lo scroll */
  overflow: auto; /* Abilita lo srcolling se la barra laterale ha troppo contenuto */
}

Visualizza esempio

Barra di navigazione orizzontale

Esistono due modi per creare una barra di navigazione orizzontale. Utilizzo di elementi di elenco in linea o mobili.

Elementi dell'elenco in linea

Un modo per costruire una barra di navigazione orizzontale è specificare gli elementi <li> come inline, oltre al codice "standard" della pagina precedente:

li {
  display: inline;
}

Visualizza esempio

Spiegazione dell'esempio

• display: inline; - Di default, gli elementi <li> sono elementi di blocco. Qui rimuoviamo le interruzioni di riga prima e dopo ogni elemento dell'elenco per visualizzarli su un'unica riga

Elementi dell'elenco mobili

Un altro modo per creare una barra di navigazione orizzontale è rendere come float gli elementi <li> e specificare un layout per i collegamenti di navigazione:

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

Visualizza esempio

Spiegazione dell'esempio

• float: left; - Usa float per far fluttuare gli elementi del blocco uno accanto all'altro
• display: block; - Ci consente di specificare il riempimento (e altezza, larghezza, margini, ecc. se si desidera)
• padding: 8px; - Specifica un po' di riempimento tra ciascun elemento <a>, per farli apparire belli
• background-color: #dddddd; - Aggiungi un colore di sfondo grigio a ciascun elemento <a>.

Esempi di barra di navigazione orizzontale

Creare una barra di navigazione orizzontale di base con un colore di sfondo scuro e modificare il colore di sfondo dei collegamenti quando l'utente sposta il mouse su di essi:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #111;
}

Visualizza esempio

Collegamento di navigazione attivo/corrente

.active {
  background-color: #04AA6D;
}

Visualizza esempio

Collegamenti allineati a destra

Allineare a destra i collegamenti spostando gli elementi dell'elenco a destra (float:right;):

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

Visualizza esempio

Divisori di bordo

Aggiungere la proprietà border-right all'elemento <li> per creare divisori di collegamento:

/* Aggiunge un bordo destro grigio a tutti gli elementi dell'elenco, tranne l'ultimo elemento (ultimo figlio) */
li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

Visualizza esempio

Barra di navigazione fissa

Fare in modo che la barra di navigazione rimanga nella parte superiore o inferiore della pagina, anche quando l'utente scorre la pagina:

Fissa in alto

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

Visualizza esempio

Fissa in basso

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Visualizza esempio

Barra di navigazione orizzontale grigia

Un esempio di barra di navigazione orizzontale grigia con un sottile bordo grigio:

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li a {
  color: #666;
}

Visualizza esempio

Barra di navigazione sticky

Aggiungere position: sticky; a <ul> per creare una barra di navigazione sticky.

Un elemento adesivo (sticky) alterna tra relativo e fisso, a seconda della posizione di scorrimento. È posizionato relativo finché non viene soddisfatta una determinata posizione di offset nel viewport, quindi "si attacca" al suo posto (come position:fixed).

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Visualizza esempio

Altri esempi

• Responsive Topnav
• Responsive Sidenav
• Dropdown Navbar