How do I get my transition hamburger menu line to work in reverse in CSS/JS?

by

I am trying to get my hamburger menu to work, but it doesn’t (not as I want to anyway). The animation transition works upon clicking the button the first time around, but upon clicking it again, it does the same thing. It should animate like a reverse transition of the first for the upon clicking.

let a = document.getElementsByClassName("mobile1")[0];

document.querySelector(".button-one").addEventListener("click", () => {
  a.classList.toggle("mobile2");
})
button {
  background: transparent;
  border: 3px #000 solid;
  border-radius: 0.25rem;
  position: absolute;
  left: 20px;
  top: 20px
}

.button-one {
  align-items: center;
  display: flex;
  height: 21px;
  width: 30px;
}

.mobile1 {
  background-color: black;
  height: 3px;
  width: 100%
}

.mobile1 {
  background-color: currentColor;
  position: absolute;
  left: 0;
  top: 12px;
  transition: top 250ms ease, transform 250ms ease 250ms;
  transform-origin: center;
  width: 100%
}

.mobile2 {
  top: 0;
  width: 100%;
}

.mobile2 {
  transform: rotate(-45deg);
}
<button class="button-one">
  <div class="mobile1"></div>
</button>

Any help is appreciated…

  • Is the extra curly brace in first piece of CSS (at the end) a copy/paste or typo error or does it exist in actual CSS?

    – 

  • It was a media query, right brace, that wasn’t put in the snippet (amended)

    – 




  • "upon clicking it again it does its own thing" – can you describe that? Is it what we see in the above snippet – the horizontal line that shifts up and then rotates but on reverse it does the opposite (move down and rotate)? What is it supposed to do?

    – 

  • On clicking it again, I want the line to rotate then move down

    – 

  • It is worth mentioning that using a div within a button does not meet the HTML standards. You can read more about allowed items within a button in the Phrasing content section.

    – 




Need to update the transition CSS property of the mobile1 class and add a transition property for the mobile2 class since it should move reversely when the class is changed (user is clicked).

As an explanation;

  • When the user clicks on it first time, move the line first and then transform it
  • When the user clicks on it second time, transform the line first and then move it
let a = document.getElementsByClassName("mobile1")[0];

document.querySelector(".button-one").addEventListener("click", () => {
    a.classList.toggle("mobile2");
})
    button{
        background: transparent;
        border:3px #000 solid;
        border-radius: 0.25rem;
        position:absolute;
        left: 20px;
        top:20px
    }
    
    .button-one{
        align-items: center;
        display: flex;
        height: 21px;
        width: 30px;
    }
    
    .mobile1 {
        background-color: black;
        height: 3px;
        width: 100%
    }
    
    
    .mobile1{
        background-color: currentColor;
        position:absolute;
        left:0;
        top:12px;
        transition: transform 250ms ease, top 250ms ease 250ms; **
        transform-origin: center;
        width:100%
    }
    
    .mobile2 {
        top:0;
        width:100%;
    }
    
    .mobile2 {
        transform:rotate(-45deg);
        transition: top 250ms ease, transform 250ms ease 250ms; **
    }
<button class="button-one">
                <div class="mobile1">
                </div>
</button>

Leave a Comment