Barre de navigation verticale CSS


Table des matières

    Afficher la table des matières


Barre de navigation verticale

Pour créer une barre de navigation verticale, vous pouvez styliser les éléments <a> à l'intérieur de la liste, en plus du code de la page précédente :

Exemple

li a
{
   
display: block;
   
width: 60px;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li a {
  display: block;
  width: 60px;
  background-color: #dddddd;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>

</body>
</html>


Exemple expliqué :

display: block;

- L'affichage des liens sous forme d'éléments de bloc rend toute la zone du lien cliquable (pas seulement le texte), et cela nous permet de spécifier la largeur (et le remplissage, la marge, la hauteur, etc. si vous le souhaitez)

width: 60px;

- Les éléments de bloc occupent toute la largeur disponible par défaut. Nous voulons spécifier une largeur de 60 pixels

Vous pouvez également définir la largeur de <ul> et supprimer la largeur de <a>, car ils occuperont toute la largeur disponible lorsqu’ils seront affichés sous forme d’éléments de bloc. Cela produira le même résultat que notre exemple précédent :

Exemple

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

li
a
{
    
display: block;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
} 

li a {
  display: block;
  background-color: #dddddd;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>

</body>
</html>




Exemples de barre de navigation verticale

Créez une barre de navigation verticale de base avec une couleur d'arrière-plan grise et changer la couleur de fond des liens lorsque l'utilisateur passe la souris dessus eux:

Exemple

ul {
  list-style-type: none;
  
margin: 0;
  padding: 0;
  width: 
200px;
  background-color: #f1f1f1;
}
li a {
  display: 
block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
/* 
Change the link color on hover */
li a:hover {
  
background-color: #555;
  color: white;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>


Lien de navigation actif/actuel

Ajoutez une classe "active" au lien actuel pour indiquer à l'utilisateur sur quelle page il se trouve :

Exemple

.active {
  background-color: #04AA6D;
  
color: white;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>
<p>In this example, we create an "active" class with a green background color and a white text. The class is added to the "Home" link.</p>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>


Centrer les liens et ajouter des bordures

Ajoutez text-align:center à <li> ou <a> pour centrer les liens.

Ajoutez la propriété border pour <ul> ajouter une bordure autour de la barre de navigation. Si tu veux aussi bordures à l'intérieur de la barre de navigation, ajoutez un border-bottom à tous les éléments <li>, à l'exception du le 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 →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  border: 1px solid #555;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

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

li:last-child {
  border-bottom: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>
<p>In this example, we center the navigation links and add a border to the navigation bar.</p>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>


Barre de navigation verticale fixe pleine hauteur

Créez une navigation latérale « collante » pleine hauteur :

Exemple

ul {
  list-style-type: none;
  
margin: 0;
  padding: 0;
  width: 
25%;
  background-color: #f1f1f1;
  height: 100%; /* Full height */
    position: fixed; /* 
Make it stick, even on scroll */
  
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <h2>Fixed Full-height Side Nav</h2>
  <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
</div>

</body>
</html>


Remarque : Cet exemple peut ne pas fonctionner correctement sur les appareils mobiles.