I try to toggle the mobile menu, but I can't get it to close. It doesn't remove the class when clicking the Close menu button.
Adding works pretty fine. Is there something wrong with my if-statement? Thank you for helping me.
Full code is on Github
const openMenu = document.querySelector('.open-menu');
const closeMenu = document.querySelector('.close-menu');
const navList = document.querySelector('.nav-list');
const navBurger = document.querySelector('.nav-burger');
// Toggle Menu
function toggleMenu() {
if (navList.classList.contains('show-menu')) {
navList.classList.remove('show-menu');
closeMenu.style.display = 'none';
openMenu.style.display = 'block';
} else {
navList.classList.add('show-menu');
closeMenu.style.display = 'block';
openMenu.style.display = 'none';
}
}
navBurger.addEventListener('click', toggleMenu);<nav>
<h3 class="nav-logo"><img class="logo-icon" src="https://www.coditt.com/images/LogoPlaceholder.png" alt="placeholdeer" style="width: 75px"/> Vacation</h3>
<ul class="nav-list">
<li class="menu-item"><a href="#">Tours</a></li>
<li class="menu-item"><a href="#">About us</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
</ul>
<a class="nav-burger" href="#"><img class="open-menu" alt="open menu" />Open menu</a>
<a href="#" class="nav-burger"><img class="close-menu" alt="close menu" />Close menu</a>
</nav>Use navList.classList.toggle("show-menu").
So instead of:
function toggleMenu() {
if (navList.classList.contains("show-menu")) {
navList.classList.remove("show-menu");
closeMenu.style.display = "none";
openMenu.style.display = "block";
} else {
navList.classList.add("show-menu");
closeMenu.style.display = "block";
openMenu.style.display = "none";
}
}
It should be:
function toggleMenu() {
navList.classList.toggle("show-menu");
}
EDIT:
As Raexune pointed out, my answer wasn't complete. So here is a better explanation..
<a class="nav-burger" id="open" href="#"><img class="open-menu" src="./img/menu-svgrepo-com.svg" alt="open menu"></a>
<a href="#" class="nav-burger" id="close"><img class="close-menu" src="./img/close-svgrepo-com.svg" alt="close menu"></a>
function toggleMenu() {
navList.classList.toggle('show-menu')
openMenu.style.display = 'none';
closeMenu.style.display = 'block';
}
function untoggleMenu(){
navList.classList.toggle('show-menu');
openMenu.style.display = 'block';
closeMenu.style.display = 'none';
}
document.getElementById('open').addEventListener('click', toggleMenu);
document.getElementById('close').addEventListener('click', untoggleMenu);
This isn't really the best answer, still.. but you can take some points. I used id instead of class, which should be better since class can return an array and so you have to indicate which instance you are manipulating. I believe that was the problem with the code not closing the menu.
And second, there is a better way to use the functions that I used but I left it there to make it understandable as to how I manipulated these instances separately.