Faire un menu coulissant de navigation latérale pour les conceptions réactives

Ce tutoriel vous montre comment créer un menu de navigation latéral extensible réactif à l'aide de JavaScript et CSS. Le résultat final est un menu élégant et moderne.

Voici une démo en direct:

1. Structure HTML:

Commencez par ajouter le HTML pour le menu latéral:

<div class="sidenav" id="sideNavigation">
  <a class="close-btn" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">×</a>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Features</a>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact Us</a>
</div>

<nav class="topnav">
  <a class="ham-icon" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">
    <svg height="30" id="icoOpen" width="30">
      <path d="M0,5 30,5" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
      <path d="M0,14 30,14" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
      <path d="M0,23 30,23" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
    </svg>
  </a>
</nav>

<main id="main">
  <h1>This Side Navigation Menu Looks Good!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>

Cela configure le menu latéral (sidenav), une icône de hamburger (ham-icon) pour l'ouvrir, un bouton de fermeture (close-btn), et la zone de contenu principale (main).

2. Fonctionnalité JavaScript:

Ce javascript gère les actions ouvertes et fermées du menu:

document.querySelector("a.ham-icon").addEventListener("click", function(event){
  document.getElementById("sideNavigation").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
});

document.querySelector("a.close-btn").addEventListener("click", function(event){
  document.getElementById("sideNavigation").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
});

Cliquez sur l'icône du hamburger élargit le menu; Cliquez sur le bouton Fermer l'effondre.

3. Style CSS:

Le CSS stylise le menu et son animation:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmain {
  transition: margin-left 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  padding: 20px;
  width: 100%;
}

body {
  overflow-x: hidden;
}

a svg {
  transition: all 0.5s ease;
}

a svg:hover {
  transform: rotate(180deg);
}

@media screen and (max-height: 480px) {
  .sidenav {
    padding-top: 3rem;
  }
  .sidenav a {
    font-size: 1.5rem;
  }
}

Ce CSS fournit l'animation de diapositive lisse, gère le débordement et ajoute une réactivité pour les écrans plus petits. Le overflow-x: hidden; sur le corps empêche les barres de défilement horizontales.

4. Suppression de l'animation de diapositive (facultative):

Pour supprimer l'animation de diapositive, définissez les propriétés transition sur 0s dans votre CSS:

.sidenav {
  transition: 0s;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmain {
  transition: margin-left 0s;
}

Cela fait apparaître et disparaître le menu instantanément.

Conclusion:

Ce menu de navigation latéral simple mais efficace est facilement personnalisable et adaptable à divers besoins de conception. Pensez à utiliser un cadre CSS comme Bootstrap ou Bulma pour des options de style plus avancées. Merci à Monty Shokeen pour ses contributions!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!