javascript – Navigation bar dissapear on click


I have this navigation menu with a hamburger icon as well, I used a JS function to make the list disappear when the hamburger icon is clicked, however I was thinking how would I trigger an animation on the burger icon as well as hide the list on click. Should I create another function, or just use the first one for both actions.

    <div class="wrapper">
  <div class="menu-btn">
    <div class="burger"></div>
  </div>
  <div class="navlist">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Services</li>
      <li>Contact</li>
    </ul>
  </div>
</div>
const wrapper = document.querySelector(".wrapper");
const menuBtn = document.querySelector(".menu-btn");
let menuOpen = false;
menuBtn.addEventListener("click", () => {
  if (!menuOpen) {
    wrapper.classList.remove("wrapper");
    wrapper.classList.add("close");
    menuOpen = true;
  } else {
    wrapper.classList.add("wrapper");
    wrapper.classList.remove("close");
    menuOpen = false;
  }
});


`  CSS styling
.burger::before {
  transform: translateY(-10px);
}

.burger::after {
  transform: translateY(10px);
}

.close .navlist {
  display: none;`



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here