Comment créer : Liens de navigation à largeur égale

Apprendre à créer une barre de navigation avec des liens de navigation à largeur égale.

Créer une barre de navigation responsive

Première étape - Ajouter HTML :

<!-- Menu de navigation -->
<div class="navbar">
  <a class="active" href="#">Home</a>
  <a href="#">Search</a>
  <a href="#">Contact</a>
  <a href="#">Login</a>
</div>

Deuxième étape - Ajouter CSS :

/* Définir le style du menu de navigation */
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}
/* Liens de navigation */
.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 25%; /* Quatre liens de largeur égale. Si vous en avez deux, utilisez 50%, pour trois, utilisez 33.33%, etc. */
  text-align: center; /* Si vous souhaitez centrer le texte */
}
/* Ajouter la couleur de fond au survol de la souris */
.navbar a:hover {
  background-color: #000;
}
/* Définir le style des liens actuels/actifs */
.navbar a.active {
  background-color: #04AA6D;
}
/* Ajouter la capacité de réponse - Sur les écrans de moins de 500 pixels, afficher les liens de navigation empilés plutôt que côte à côte */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* Si vous souhaitez aligner le texte à gauche sur les écrans de petite taille */
  }
}

Essayez-le vous-même

Pages liées

Tutoriel :Barre de navigation CSS