Créez un design réactif avec un menu de navigation latéral coulissant

Dans ce didacticiel, vous créerez un menu de navigation latéral extensible à l'aide de JavaScript et CSS. Le produit final est présenté ci-dessous :

1. Créer une marque

Tout d’abord, ajoutons quelques balises au menu latéral :

<div id="sideNavigation" class="sidenav">
  <a href="#" class="close-btn">&times;</a>
  <a href="#">About</a>
  <a href="#">Features</a>
  <a href="#">Contact Us</a>
</div>
 
<nav class="topnav">
  <a href="#" class="ham-icon">
    <svg width="30" height="30" id="icoOpen">
        <path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
        <path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
        <path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
    </svg>
  </a>
</nav>
 
<section 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>
</section>

Ici, vous pouvez voir que nous avons ajouté la navigation dans la barre supérieure à l'aide de la balise sidenav类创建了一个侧边菜单div。接下来，我们通过 <nav> et que nous avons utilisé SVG pour l'icône du menu latéral.

N'oubliez pas de mettre tout le contenu de votre site Web dans un conteneur div id="main" pour qu'il glisse vers la droite.

2. Écrivez du code JavaScript

Ensuite, ajoutons JavaScript qui utilisera la classe ham-icon pour écouter les événements de clic sur l'icône du hamburger, ainsi que le bouton de fermeture qui apparaît après le glissement du menu de navigation latéral sur l'écran.

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";
});

Cliquer sur l'icône du hamburger devrait révéler la navigation latérale. Nous faisons cela en définissant la largeur de la navigation sur la marge gauche de 250px 并同时向主网站内容添加 250px .

Cliquer sur le bouton de fermeture devrait masquer la navigation latérale. Pour ce faire, nous remettons la largeur de la navigation à 0, tout en définissant également la marge gauche du contenu principal du site à 0.

3. Utilisez les styles CSS

Enfin, nous devons utiliser du CSS pour styliser le menu latéral et les liens sur la page. CSS placera tous les éléments de la page Web exactement là où nous le souhaitons. Nous appliquerons également une animation simple à l’aide de l’attribut transition. Examinons CSS une partie à la fois.

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 4rem;
  transition: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  font-family: "Bebas Neue";
}

.sidenav a {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #bdbdbd;
  display: block;
  transition: 0.4s;
  white-space: nowrap;
  font-size: 2rem;
}

.sidenav a:hover {
  color: white;
  background: #9e9e9e;
}

Lorsque nous height设置为100%，并将其初始width设置为0以使其隐藏。但是，只有当 overflow-x 属性的值设置为 hidden la navigation latérale, le contenu de la navigation latérale restera masqué.

La propriété de transition garantit que les changements de largeur de navigation latérale ne se produisent pas soudainement, et la fonction d'assouplissement la rend un peu élastique.

Pour les liens dans la navigation latérale, nous ferons white-space 属性的值设置为 nowrap afin que le texte du menu ne déborde pas de plusieurs lignes.

.sidenav .close-btn {
  position: absolute;
  top: -1rem;
  right: 1rem;
  font-size: 5rem;
}

.sidenav .close-btn:hover {
  background: initial;
  transform: scale(1.2);
}

Le style CSS ci-dessus sépare notre bouton de fermeture des autres liens de la navigation latérale. Nous avons appliqué un positionnement absolu au bouton de fermeture et empêché son arrière-plan de devenir gris clair au survol. Sa taille augmente également de 20 % lorsque l’utilisateur le survole.

Le CSS suivant garantira désormais que la position du contenu principal se déplace en synchronisation avec le menu de navigation en utilisant la même durée de transition et la même fonction d'assouplissement. Le placement overflow-x 属性的值设置为 hidden garantit qu'aucune barre de défilement horizontale n'apparaît lorsque le contenu se déplace.

#main {
  transition: margin-left 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  padding: 20px;
  width: 100%;
}

body {
 overflow-x: hidden; 
}

Nous pouvons également ajouter un petit mouvement de rotation à l'icône du hamburger à l'aide du CSS suivant. Il fait pivoter l'icône du hamburger de 180 degrés en 0,5 seconde.

a svg {
  transition: all 0.5s ease;
}
a svg:hover {
  transform: rotate(180deg);
}

Enfin, rendons le menu de navigation réactif en ajustant l'espacement et la taille des liens à l'aide du CSS suivant. Cela garantit que le menu ne s'étend pas hors de portée sur les écrans avec moins d'espace vertical.

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

À ce stade, votre menu de navigation devrait ressembler à la démo CodePen suivante.

4. Supprimer le diaporama

Pour faire apparaître le menu sans animation de diapositive, modifiez simplement la propriété CSS transition comme indiqué dans la forme abrégée ci-dessous :

.sidenav {
    transition: 0s; 
}

#main {
    transition: margin-left 0s;
}

Cela fera apparaître les modifications immédiatement puisqu'il n'y a aucun délai spécifié dans transition 中没有指定延迟。我们使用的默认值是 0.5s. La valeur par défaut que nous utilisons est 0,5s.

Conclusion

Créer un menu latéral ne nécessite que quelques lignes de code et ne nécessite pas beaucoup de ressources. Rendez votre code réactif aux différentes résolutions d'écran de l'appareil en modifiant votre CSS en ajoutant des requêtes multimédias pour vos cas spécifiques.

Pour aller plus loin, vous souhaiterez peut-être utiliser un framework CSS comme Bootstrap ou Bulma pour styliser votre menu.

Cet article a été mis à jour avec une contribution de Monty Shokeen. Monty est un développeur full-stack qui aime également écrire des tutoriels et apprendre de nouvelles bibliothèques JavaScript.

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!