Animate hamburger button on query close selection

I have a drop down menu with an animating button, now I’ve made it so that the drop down menu can be closed upon clicking a content wrapper container div but the problem is it doesn’t account for animating the button back to close position, below is my HTML and J’s code

function myFunction(x) {
/* This controls the animating function */
 x.classList.toggle("change");
/* This controls the menu close and open */
 var x = document.getElementById('Menu-cont');
if (x.style.height === "230px") {
        x.style.height = "0px";

    } else {
        x.style.height = "230px";
    }
}
/* This is a way to close menu click a container wrapper div */
document.querySelector('.content-wrapper').addEventListener('click', function(){ closeNav(); })
function closeNav() { 
var x = document.getElementById('Menu-cont').style.height = "0px"; 
}

I want animating button to animate back to close on after clicking wrapper div

this is animating html and css

<div class="menu-icon" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>



.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

41 thoughts on “Animate hamburger button on query close selection”

  1. 241948 763094Thank you pertaining to giving this exceptional content material on your web-site. I discovered it on google. I may possibly check back again in case you publish extra aricles. 777630

    Reply

Leave a Comment