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 would like to trigger an animation on the burger icon as well as hide the list when clicked.
Should I create another function, or just use the first one for both actions.
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;
}
});.burger::before {
content: "";
transform: translateY(-10px);
}
.burger::after {
content: "";
transform: translateY(10px);
}
.close .navlist {
display: none;
}<div class="wrapper">
<div class="menu-btn">
<div class="burger">Burger</div>
</div>
<div class="navlist">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>