Icone hamburger animée et menu rideau

bjr à tous.
je voudrais faire un menu rideau avec icone burger animée.
j'ai trouvé ce tuto:
https://www.youtube.com/watch?v=hRaMbPlCT4A
pas de pb pour l'icone burger animée.
par contre le menu ne glisse pas de la gauche vers la droite (voir image).

sans doute ma css pose un pb
voici le code

.menu {
        background-color: red;
        float: left;
        width: 150px;
        position: relative;
        opacity: 1;
        transition: 0.3s;
        transform: translateX(-150px);
        pointer-events: none;   
        }
.menu-open {
        background-color: red;
         float: left;
         width: 150px;
         position: relative;
        opacity: 1;
        transition: 0.3s;
        transform: translateX(0px);
        pointer-events: all;   
        }

merci d'avance pour vos idées.
edgard
Modifié par edgard03 (13 May 2025 - 07:18)

Bonjour,

Sans vouloir offensé, les codes que tu partage sont incomplets et du coup le lien vers le tuto est vraiment sans intérêts .

Quelques remarques:
position:relative + transform font double emploi, le positionnement relatif est ici implicite avec transform d'autant que tu ne modifie pas ses coordonées d'affichage.

Les deux class ne retirent pas l’élément du flux ni ne libèrent ou reprennent de l'espace, l’élément est seulement: visible ou pas. L'occupation de l'espace est peut-être géré sur l’élément parent, mais on ne voit rien de ta structure HTML ni du reste du CSS. C'est peut-être aussi ce que tu souhaite, seulement caché l’élément.

Pour le flottement, sans plus de contexte, on ne peut que seulement le remarqué.

Entre .menu et .menu-open , il y a de nombreuses règles redondantes
Au lieu de passer d'une class à une autre, il est possible d'en garder une commune et de la completer/modifier avec une autre selon l'état voulu, par exemple :

.menu {
  background-color: red;
  float: left;
  width: 150px;
  opacity: 1;
  transition: 0.3s;
  transform: translateX(-150px);
  pointer-events: none;
}
/* class ajouté pour ouvrir le menu */
.open {
  transform: translateX(0px);
  pointer-events: initial;
}

En bref, il n'y a pas assez d'infos pour reproduire ton problème.

Cordialement
Modifié par gcyrillus (13 May 2025 - 11:24)