Barre de navigation verticale CSS

Recommandations de cours :

Barre de navigation verticale

Exemple

width: 200px;
  li a {
  Vous pouvez également définir la largeur de <ul> et supprimer la largeur de <a>, car lorsqu'ils sont affichés comme des éléments en bloc, ils occupent toute la largeur disponible. Cela donnera le même résultat que dans nos exemples précédents :
}

Essayez-le vous-même

Pour construire une barre de navigation verticale, en plus du code de la dernière section, vous pouvez également définir le style des éléments <a> dans la liste :

  • li a { Explication de l'exemple :
  • Vous pouvez également définir la largeur de <ul> et supprimer la largeur de <a>, car lorsqu'ils sont affichés comme des éléments en bloc, ils occupent toute la largeur disponible. Cela donnera le même résultat que dans nos exemples précédents : - Afficher les liens comme des éléments en bloc permet de cliquer sur toute la zone du lien (et non seulement sur le texte), et nous pouvons également spécifier une largeur (et si nécessaire, une marge interne, une marge externe, une hauteur, etc.).

- Par défaut, les éléments en bloc occupent toute la largeur disponible. Nous devons spécifier une largeur de 60 pixels.

Exemple

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  Vous pouvez également définir la largeur de <ul> et supprimer la largeur de <a>, car lorsqu'ils sont affichés comme des éléments en bloc, ils occupent toute la largeur disponible. Cela donnera le même résultat que dans nos exemples précédents :
} 
width: 200px;
  li a {
}

Essayez-le vous-même

width: 60px;

Exemple de barre de navigation verticale

Exemple

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  Créez une barre de navigation verticale de base avec un fond de couleur grise et changez la couleur du fond du lien lorsque l'utilisateur place le curseur dessus :
  background-color: #f1f1f1;
}
width: 200px;
  li a {
  display: block;
  color: #000;
  padding: 8px 16px;
}
text-decoration: none;
/* Changez la couleur du lien lorsque le curseur est dessus */
  li a:hover {
  background-color: #4CAF50;
}

Essayez-le vous-même

background-color: #555;

Lien de navigation actif / lien de navigation actuel

Exemple

Ajoutez la classe "active" au lien actuel pour que l'utilisateur sache sur quelle page il se trouve :
  .active {
  background-color: #4CAF50;
}

Essayez-le vous-même

color: white;

Centrez les liens et ajoutez une bordure text-align:center à <li> ou <a> pour centrer les liens.

Ajoutez border Ajoutez cette propriété à <ul>, pour ajouter une bordure autour de la barre de navigation. Si vous souhaitez également ajouter une bordure à l'intérieur de la barre de navigation, ajoutez la propriété border à tous les éléments <li>. border-bottom，sauf pour l'élément dernier :

Exemple

ul {
  border: 1px solid #555;
}
li {
  text-align: center;
  border-bottom: 1px solid #555;
}
li:last-child {
  border-bottom: none;
}

Essayez-le vous-même

Barre de navigation verticale fixe complète

Créer une navigation latérale en hauteur 'adhésive' :

Exemple

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Hauteur complète */
  position: fixed; /* Le rendu adhésif, même pendant le défilement */
  overflow: auto; /* Si le contenu de la barre latérale est trop long, activez la barre de défilement */
}

Essayez-le vous-même

Attention :Il se peut que cet exemple ne fonctionne pas correctement sur les appareils mobiles.