Barra di navigazione CSS

Dimostrazione: Barra di navigazione

Barra di navigazione verticale

Barra di navigazione orizzontale


Barra di navigazione

Una navigazione facile è molto importante per qualsiasi sito web.

Utilizzando CSS, è possibile trasformare un menu HTML noioso in una barra di navigazione elegante.

Barra di navigazione = lista di link

La barra di navigazione richiede un'HTML standard come base.

Nel nostro esempio, utilizzeremo una lista HTML standard per costruire la barra di navigazione.

La barra di navigazione è essentially una lista di link, quindi l'uso degli elementi <ul> e <li> è molto significativo:

Esempio

<ul>
  <li><a href="index.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>

Prova da solo

Ora, rimuovi i punti elencati, i margini e i padding (riempimento) dalla lista:

Esempio

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

Prova da solo

Esempio di spiegazione:

  • list-style-type: none; - Elimina i punti elencati. La barra di navigazione non necessita di marchi di elenco.
  • Imposta margin: 0; e padding: 0; Elimina le impostazioni predefinite del browser.

Il codice nell'esempio precedente è il codice standard utilizzato nelle barre di navigazione orizzontale e verticale, imparerai di più su questo nel capitolo successivo.