Comment créer : une barre latérale fixe

Créer une barre latérale fixe

Première étape - Ajouter HTML :

<!-- Navigation latérale -->
<div class="sidenav">
  <a href="#">À propos</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<!-- Contenu de la page -->
<div class="main">
  ...
</div>

Deuxième étape - Ajouter CSS :

/* Menu de la barre latérale */
.sidenav {
  hauteur: 100%; /* Hauteur complète de l'écran : si vous souhaitez une hauteur "automatique", supprimez ce réglage */
  largeur: 160px; /* Définir la largeur de la barre latérale */
  position: fixe; /* Barre latérale fixe (resté à l'endroit même en défilant) */
  z-index: 1; /* Toujours resté en haut */
  haut: 0; /* Toujours resté en haut */
  gauche: 0;
  couleur de fond: #111; /* Noir */
  défilement horizontal: caché; /* Désactiver le défilement horizontal */
  marge-haut: 20px;
}
/* Liens du menu de navigation */
.sidenav a {
  marge: 6px 8px 6px 16px;
  décoration de texte: none;
  taille de police: 25px;
  couleur: #818181;
  affichage: bloc;
}
/* Changer la couleur lorsque vous placez le curseur sur le lien de navigation */
.sidenav a:hover {
  couleur: #f1f1f1;
}
/* Définir le style du contenu de la page */
.main {
  marge-gauche: 160px; /* Identique à la largeur de la barre latérale */
  marge: 0px 10px;
}
/* Sur les écrans de petite taille avec une hauteur inférieure à 450 pixels, modifier le style de la barre latérale (moins de marge interne et taille de police plus petite) */
@media screen and (max-height: 450px) {
  .sidenav {marge-haut: 15px;}
  .sidenav a {taille de police: 18px;}
}

Pages associées

Tutoriel :Barre de navigation CSS

Tutoriel :Comment créer une barre de navigation latérale