11548 sujets

JavaScript, DOM et API Web HTML5

bjr.
j'essaye de faire un menu rideau , activé par une icone hamburger .
pas de pb pour le burger, par contre le menu ne glisse pas de gauche à droite.
peut être un pb de js ( il faudrait utiliser la classe active)
voici le code js
 let isMenuOpen = false;
 
 const  menuButton = document.querySelector(".menu-btn");
 const  menu = document.querySelector(".menu");
 
 menuButton.addEventListener("click", () => {
       isMenuOpen = !isMenuOpen;
       
       if(isMenuOpen){
           menuButton.classList.add("open");
           menu.classList.add("menu-open");
           } else {
             menuButton.classList.remove("open");
             menu.classList.remove("menu-open");
             }
           });

ainsi qu'une image
upload/1747123214-83089-capturedu2025-05-1309-52-29.png
merci pour vos idées
Modifié par edgard03 (13 May 2025 - 10:04)
Bjr et merci pour les réponses. en fait je sais pas trop si c'est le js ou css qui pose pb.
Voici le css qui semble poser un pb
menu {
        background-color: red;
        width: 150px;
        float: left;
        position: fixed;
        display : flex;
        opacity: 1;
        transition: 0.3s ease;
        transform: translateX(-150px);
        pointer-events: none;   
        }
.menu-open {
        background-color: red;
        width: 150px;
        position: fixed;
        display: flex;
        z-index: 1;
        opacity: 1;
        transition: 0.3s ease;
        transform: translateX(0px);
        pointer-events: all;   
        }
dans la css il faut ajouter le translate x sur une seule class .
puis ajouter la class dans le javascript
Modifié par edgard03 (16 May 2025 - 10:54)