Comment créer : Navigation en forme de pilule

Apprendre à utiliser CSS pour créer un menu de navigation en forme de pilule.

Créer une navigation en forme de pilule

Première étape - Ajouter HTML :

<div class="pill-nav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

Deuxième étape - Ajouter CSS :

/* Définir les styles des liens dans le menu de navigation en forme de pilule */
.pill-nav a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 5px;
}
/* Changer la couleur du lien au survol de la souris */
.pill-nav a:hover {
  background-color: #ddd;
  color: black;
}
/* Ajouter une couleur pour le lien actif / actuel */
.pill-nav a.active {
  background-color: dodgerblue;
  color: white;
}

Essayez-le vous-même

Pages associées

Tutoriel :Barre de navigation CSS

Tutoriel :Comment créer une barre de navigation supérieure