Comment créer : menu de navigation latérale

Créer une navigation latérale avec animation

Première étape - Ajouter HTML :

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">À propos</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<!-- Utilisez n'importe quel élément pour ouvrir la navigation latérale -->
<span onclick="openNav()">ouvrir</span>
<!-- Si vous souhaitez que la navigation latérale repousse le contenu de la page vers la droite, placez tout le contenu de la page à l'intérieur de ce div (si vous ne souhaitez pas que la navigation latérale reste en haut de la page, ne utilisez pas ce réglage) -->
<div id="main">
  ...
</div>

Deuxième étape - Ajouter CSS :

/* Menu de navigation latérale */
.sidenav {
  height: 100%; /* 100% de hauteur */
  width: 0; /* 0 largeur - Utilisez JavaScript pour modifier ce réglage */
  position: fixed; /* Reste en place */
  z-index: 1; /* Reste en haut */
  top: 0; /* Reste en haut */
  left: 0;
  background-color: #111; /* Noir */
  overflow-x: hidden; /* Désactive le défilement horizontal */
  padding-top: 60px; /* Place le contenu à 60px du haut */
  transition: 0.5s; /* Effet de transition de 0.5 secondes, utilisé pour l'affichage glissant de la navigation latérale */
}
/* Liens du menu de navigationThe navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* Changer la couleur de l'élément de navigation lorsque vous passez la souris dessus */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Position et style du bouton de fermeture (en haut à droite) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Définir le style du contenu de la page - Si vous souhaitez pousser le contenu de la page vers la droite lors de l'ouverture de la navigation latérale, utilisez ce réglage. */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* Modifier le style de la navigation latérale sur les petits écrans whose hauteur est inférieure à 450px (réduire les marges internes et la taille de la police) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Étape 3 - Ajouter JavaScript :

Dans l'exemple suivant, la navigation latérale glissera et sa largeur sera définie à 250px :

Exemple de couverture de navigation latérale

/* Définir la largeur de la navigation latérale à 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
/* Définir la largeur de la navigation latérale à 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Essayer par vous-même

Dans l'exemple suivant, la navigation latérale glissera et poussera le contenu de la page vers la droite (les valeurs utilisées pour définir la largeur de la navigation latérale sont également utilisées pour définir la marge extérieure gauche du contenu de la page) :

Navigation latérale qui pousse le contenu

/* Définir la largeur de la navigation latérale à 250px, la marge extérieure gauche du contenu de la page à 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* Définir la largeur de la navigation latérale à 0, la marge extérieure gauche du contenu de la page à 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

Essayer par vous-même

L'exemple suivant fait glisser la navigation latérale et pousse le contenu de la page vers la droite. Cependant, cette fois, nous avons ajouté une couleur de fond noire translucide de 40% au élément body pour "surligner" la navigation latérale.

Navigation latérale avec une transparence

/* Définir la largeur de la navigation latérale à 250px, la marge extérieure gauche du contenu de la page à 250px, et ajouter une couleur de fond noire au body */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* 设置侧边导航宽度为 0，页面内容左外边距为 0，body 背景色为白色 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

Essayer par vous-même

在下面的例子中，侧边导航将从左侧滑入，并覆盖整个页面（宽度为 100%）：

全宽的侧边导航：

/* 打开侧边导航 */
function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}
/* 关闭/隐藏侧边导航 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Essayer par vous-même

下面的例子在打开和关闭侧边导航菜单时不带动画效果。

没有动画的 Sidenav

/* 打开侧边导航 */
function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}
/* 关闭/隐藏侧边导航 */
function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}

Essayer par vous-même

下面的例子展示了如何创建右侧导航菜单：

右侧导航：

.sidenav {
  right: 0;
}

Essayer par vous-même

下面的例子展示了如何创建一个始终显示的侧边导航菜单（固定位置）：

始终显示的侧边导航：

/* 侧边导航 */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* 页面内容 */
.main {
  margin-left: 200px; /* 与侧边导航的宽度相同 */
}

Essayer par vous-même

Pages connexes

Tutoriel :Barre de navigation CSS