On my website, I am trying to set up an icon that will display a menu bar for mobile users. I have written some JavaScript code for this functionality, but it's not working as expected. My approach involved creating an element called "Menu" and assigning the icon button class to it. However, when I tried toggling a simple classlist for the div I wanted to appear, the class "hamburgermenu" showed up within the button class instead of on its own. Can anyone help me identify what might be causing this issue and guide me in the right direction?
Here's the code snippet:
const menu = document.querySelector(".hamburger button"); // Get dropdown menu when clicking on hamburger Icon
menu.addEventListener("click", function() {
Showdropdown();
});
// Showing dropdown content
function Showdropdown() {
menu.classList.toggle("hamburgermenu");
}/* General styling attributes */
html {
-webkit-text-size-adjust: 100%;
}
* {
margin:0;
padding:0;
border:0;
outline:0;
text-decoration:none;
list-style:none;
box-sizing: border-box;
}... (remaining CSS follows)
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DraftFlex</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<link rel="stylesheet" href="styles.css">... (rest of HTML content provided below)
</ul>
</nav>
</header>
<main>
</main>
</body>
</html>