Comment créer : menu fixe

Comment créer un menu supérieur fixe

Première étape - Ajoutez HTML :

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>
<div class="main">
  <p>Some text some text some text some text..</p>
</div>

Deuxième étape - Ajoutez CSS :

Pour créer un menu fixe en haut, utilisez position:fixed et top:0Veuillez noter que le menu fixe couvrira votre autre contenu. Pour résoudre ce problème, ajoutez une marge extérieure supérieure égale ou supérieure à la hauteur du menu (margin-top) au-dessus du contenu.

/* Barre de navigation */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Déplacez la barre de navigation en position fixe */
  top: 0; /* Placez la barre de navigation en haut de la page */
  width: 100%; /* Largeur complète */
}
/* Liens dans la barre de navigation */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Modifiez le fond lors du passage de la souris */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* Contenu principal */
.main {
  margin-top: 30px; /* Ajoutez une marge extérieure supérieure pour éviter le chevauchement du contenu */
}

Essayez-le vous-même

Comment créer un menu inférieur fixe

Pour créer un menu inférieur fixe, utilisez position:fixed et bottom:0:

/* Barre de navigation */
.navbar {
  position: fixed; /* Déplacez la barre de navigation en position fixe */
  bottom: 0; /* Placez la barre de navigation en bas de la page */
  width: 100%; /* Largeur complète */
}
/* Contenu principal */
.main {
  margin-bottom: 30px; /* Ajoutez une marge extérieure inférieure pour éviter le chevauchement du contenu */
}

Essayez-le vous-même

Pages connexes

Tutoriel :Barre de navigation CSS