Barra di Navigazione Orizzontale CSS

Barra di navigazione orizzontale

Ci sono due metodi per creare una barra di navigazione orizzontale: utilizzareIn lineaoFluttuazioneElementi.

Elementi elencati in linea

Un altro metodo per costruire una barra di navigazione orizzontale è specificare gli elementi <li> come inline oltre al codice "standard" del capitolo precedente:

Esempio

li {
  display: inline;
}

Prova a fare tu stesso

Esempio di spiegazione:

display: inline; - Di default, gli elementi <li> sono elementi bloccati. Qui, rimuoviamo i segni di newline prima e dopo ogni elenco per far sì che vengano visualizzati in una riga.

Elementi elencati fluttuanti

Un altro metodo per creare una barra di navigazione orizzontale è far fluttuare gli elementi <li> e definire la disposizione dei link di navigazione:

Esempio

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

Prova a fare tu stesso

Esempio di spiegazione:

  • float: left; - Utilizzare float per far scivolare gli elementi bloccati uno accanto all'altro
  • display: block; - Visualizzare i link come elementi bloccati rende l'intera area del link cliccabile (non solo il testo), e ci permette di specificare il riempimento (se necessario, anche altezza, larghezza, margine, ecc.)
  • padding: 8px; - Fare apparire gli elementi bloccati più gradevoli
  • background-color: #dddddd; - Aggiungere un colore di sfondo grigio a ogni elemento

Suggerimento:Se si desidera un sfondo a piena larghezza, aggiungere background-color all'<ul>' invece di ogni elemento <a>:

Esempio

ul {
  background-color: #dddddd;
}

Prova a fare tu stesso

Esempio di barra di navigazione orizzontale

Creare una barra di navigazione orizzontale di base con sfondo di colore scuro e cambiare il colore di sfondo del link quando l'utente posiziona il mouse sopra di esso:

Esempio

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;
}
/* Cambia il colore del link in #111 (nero) quando il mouse si posiziona sopra */
li a:hover {
  background-color: #111;
}

Prova a fare tu stesso

Link di navigazione attivo/attuale

Aggiungi la classe "active" al link corrente in modo che l'utente sappia su quale pagina si trova:

Esempio

.active {
  background-color: #4CAF50;
}

Prova a fare tu stesso

Allineamento a destra dei link

Allineamento a destra dei link tramite la floating dei elementi della lista (float:right;）：

Esempio

<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>

Prova a fare tu stesso

barrina di separazione

Aggiungi border-right Proprietà aggiunta a <li> per creare un separatore di link:

Esempio

/* Aggiungi un bordo destro grigio a tutti gli elementi della lista, eccetto l'ultimo (last-child) */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

Prova a fare tu stesso

Barra di navigazione fissa

Mantieni la barra di navigazione nella parte superiore o inferiore della pagina, anche se l'utente scrollerà la pagina:

Fissa in alto

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

Prova a fare tu stesso

Fissa in basso

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

Prova a fare tu stesso

Attenzione:La posizionamento fisso potrebbe non funzionare correttamente sui dispositivi mobili.

Barra di navigazione orizzontale grigia

Esempio di barra di navigazione orizzontale grigia con bordi leggeri di grigio

Esempio

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

Prova a fare tu stesso

Barra di navigazione adesiva

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

Gli elementi adesivi passano da posizionato in modo relativo a posizionato in modo fisso in base alla posizione di scorrimento. È posizionato in modo relativo fino a quando nella visualizzazione non incontra la posizione di offset fornita - quindi lo "incolla" nella posizione appropriata (ad esempio, position:fixed).

Esempio

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

Prova a fare tu stesso

Attenzione:Internet Explorer, Edge 15 e versioni precedenti non supportano il posizionamento adesivo. Safari richiede il prefisso -webkit- (vedi esempio sopra). Devi anche specificare superiore,destra,inferiore o sinistra Almeno uno, per far funzionare la posizionamento adesivo.

Più esempi

Barra di navigazione superiore reattiva
Come creare una barra di navigazione superiore reattiva utilizzando le query di media CSS.
Barra di navigazione laterale reattiva
Come creare una barra di navigazione laterale reattiva utilizzando le query di media CSS.
Barra di navigazione a discesa
Come aggiungere menu a discesa nella barra di navigazione.