Comment créer une barre de menu coulissante en HTML, CSS et JavaScript

Photo par rawpixel sur Unsplash

Un menu correspond à ce que vous recherchez lorsque vous accédez à un site Web. Il a des options et vous donne accès à tout ce que le site Web peut vous offrir. Vous diriez certainement que c'est une partie importante d'un site Web, non?

Mon ami Girish Patil et moi-même avons lancé ce mois-ci un bulletin d’information bimensuel destiné aux développeurs de premier plan. Le premier bulletin contient des barres de menu coulissantes, et je vous explique donc ici comment nous l’avons construit.

Avant de commencer, installez un conteneur pour l’ensemble de votre page Web et concevez la largeur et la hauteur en fonction de vos besoins. Maintenant, à l'intérieur du conteneur, vous devez placer un menu coulissant. Dans cet article, nous expliquerons comment créer un menu coulissant gauche.

Commençons

Inspiration !!!! ;)

Le code HTML du curseur est donné ci-dessous. C'est une version nue de base.


   Cliquez ici
   
    

Curseur      Twitter
     @Supriya
     @Girish
   

Une balise d'ancrage est utilisée pour ouvrir le menu lorsque l'utilisateur clique dessus. C’est ce qui déclenche l’ouverture du menu. Vous pouvez donc comprendre pourquoi il s’appelle slider-trigger. Le composant de menu est ce qui se trouve dans la classe slider-parent.

Maintenant, concevez la barre de menus en CSS. Faites attention aux détails de conception.

.slider-container {
  position: relative;
 }
  .slider-container .slider-parent {
    hauteur: 70vh;
    largeur maximale: 250 px;
    largeur: 100%;
    arrière-plan: # 6C7A89;
    position: absolue;
    à gauche: -250px;
    en haut: 50 px;
    visibilité: cachée;
    opacité: 0;
    événements de pointeur: aucun;
    transition: .2s tout linéaire;
 }
   .slider-container .slider-parent.active {
      visibilité: visible;
      événements de pointeur: hériter;
      transition: .2s tout facile-in-out;
      opacité: 1;
      gauche: 0;
 }

Décomposons maintenant l'extrait ci-dessus et voyons comment cela fonctionne.

Maxwidth définit la largeur maximale que la div peut occuper. Dans une fenêtre plus petite, il peut occuper moins de 250 pixels. La div occupe 250px lorsque la fenêtre est complètement étendue sur l'écran.

Parfois, l'utilisateur peut consulter le site Web sur un écran beaucoup plus petit. Nous souhaitons donc que notre division redimensionne en conséquence.

Passons à autre chose, regardons pourquoi il reste: -250px? Ceci est fait pour obtenir cette action glissante en douceur pour le menu. Notez que la valeur pour left est négative, ce qui nous indique que le menu démarre 250px à gauche de la position de départ (qui est 0). Donc, ce n'est pas présentement dans la zone visible.

Nous ne voulons pas du tout que le menu coulissant soit visible, c’est pourquoi nous ajoutons de l’opacité et masquons sa visibilité. Tout le monde aime l'animation, et cela donne une sensation visuelle intéressante. Cette animation peut être réalisée à l'aide du composant de transition.

YAYYY! Le curseur de base est terminé!

Je suis sûr que tu danseras mieux: P

Maintenant que le curseur de base est terminé, expliquons ce qui se passe lorsque le curseur est actif - c’est-à-dire lorsque vous cliquez sur la balise ancre qui ouvre la barre de menus.

Concentrez-vous sur la classe active dans le code CSS donné ci-dessus. Notez que les valeurs d'opacité et de visibilité sont modifiées. Cette modification a pour but de rendre le curseur (qui était auparavant masqué) visible à l'écran.

Aussi, vous pourriez vous demander: pourquoi est-il maintenant laissé: 0? Auparavant, le curseur était sorti de l'écran. Maintenant que nous voulons que le menu commence à gauche de l'écran, nous modifions la valeur de left à 0.

OH! L'animation! Ajoutez à nouveau le composant de transition afin que, lorsque le curseur est actif, il s’enfonce doucement de la gauche.

C'est fait! Vous avez conçu les composants, alors quelle est la prochaine étape? JavaScript! Tout cela sera mis en action.

Ajout de JavaScript

var sliderTrigger = document.getElementsByClassName ("slider-trigger") [0];
var slider = document.getElementsByClassName ('slider-parent') [0];
sliderTrigger.addEventListener ("click", fonction (el) {
if (slider.classList.contains ("active")) {
  slider.classList.remove ("active");
 }autre{
  slider.classList.add ("active");
 }
});

Voyons comment JavaScript encapsule tout et permet au curseur de fonctionner. Nous voulons que le curseur s'ouvre lorsque vous cliquez sur la balise d'ancrage slider-trigger. Nous obtenons donc cet élément dans une variable sliderTrigger. Plus tard, l’élément de curseur entier est inséré dans le curseur de variable. Nous ajoutons maintenant un écouteur d'événements qui implémente une fonction lorsque l'utilisateur clique sur l'élément sliderTrigger.

sliderTrigger.addEventListener ("clic", fonction (el) {});

La fonction écrite contrôle les mécanismes d'ouverture et de fermeture de la barre de menus coulissante. Rappelez-vous que nous avions une classe parent active et normale.

Le hack que nous implémentons ici consiste à ajouter la classe active lorsque l'utilisateur clique sur l'élément sliderTrigger et à supprimer la classe active lorsque l'utilisateur clique à nouveau sur le même élément. Pour ce faire, nous utilisons le code donné ci-dessous, afin de vérifier si la variable contient la classe active.

slider.classList.contains ("active")

Si la valeur est true, nous supprimons la classe active de la liste. Qu'est-ce qui se passe ensuite? La barre de menu coulissante se ferme. Si la valeur est false, nous ajoutons la classe active à la liste de classes. Maintenant qu'est-ce qui se passe? Oui, la barre de menu coulissante est affichée. C'est aussi simple que ça.

slider.classList.add ("active")
slider.classList.remove ("active")

Voilà c'est fait !! Regardez qui applaudit;)

Le fonctionnement du même code est indiqué ci-dessous dans le CodePen.

Bien qu’il s’agisse d’un exemple élémentaire, j’envoie des exemples de types de barres de menu coulissantes plus complexes et différents dans ma lettre d’information.

Github repo de Giyaletter

Poignée Twitter: Supriya S et Girish Patil

Je vous remercie. Bonne codage :)

Découvrez les produits par nous:

paybackhub.com et certhive.com