Barre de navigation CSS

Démonstration : barre de navigation

Barre de navigation verticale

Barre de navigation horizontale


Barre de navigation

Une navigation facile est importante pour tout site web.

En utilisant CSS, vous pouvez transformer un menu HTML ennuyeux en une barre de navigation attrayante.

Barre de navigation = liste de liens

La barre de navigation nécessite une base HTML standard.

Dans notre exemple, nous utiliserons une liste HTML standard pour construire la barre de navigation.

La barre de navigation est essentiellement une liste de liens, donc l'utilisation des éléments <ul> et <li> est très significative :

Exemple

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">Nouvelles</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">À propos</a></li>
</ul>

Essayer vous-même

Maintenant, supprimez les points de liste, ainsi que les marges et les espaces internes (padding) de la liste :

Exemple

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

Essayer vous-même

Explication de l'exemple :

  • list-style-type: none; - Supprimer les points de liste. La barre de navigation n'a pas besoin de balises de liste.
  • Définir margin: 0; et padding: 0; Supprimer les paramètres par défaut du navigateur.

Le code de l'exemple précédent est le code standard utilisé pour les barres de navigation horizontale et verticale, et vous en apprendrez plus à ce sujet au chapitre suivant.