After following a tutorial on creating an animated menu burger, I encountered a few bugs. The animation is working as intended, but it triggers no matter where I click on the page. Here is the code snippet:
const toggleMenu = document.querySelector(
'.menu-btn');
let isOpen = false;
document.addEventListener('click', () => {
if (!isOpen) {
toggleMenu.classList.add('open');
isOpen = true;
} else {
toggleMenu.classList.remove('open');
isOpen = false;
}
});.grid-container {
display: grid;
grid-template-areas: "header menu";
grid-template-columns: repeat(8, 1fr);
}
.
.
.
<!doctype html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="menu_design.css">
<head>
<div class="grid-container">
<div class="item header">
<ul class="nav-test">
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Tours</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
.
.
.
</head>
</html>
I opted for percentages in the attribute values to enable adjustment according to screen size.
Upon viewing it on my desktop, I noticed some choppiness in the animation. Any advice on how to address this issue would be greatly appreciated.
On a side note, I acknowledge the presence of an extra bullet point list. This pertains to a sliding menu that opens upon clicking the burger and is unrelated to the current issue.