Currently, I am working on implementing a hamburger menu for my website. My aim is to darken the rest of the page when the hamburger menu is clicked.
In order to achieve this effect, I have added a div with the following code:
<div id="black"></div>
This is how I have structured my HTML:
<nav role="navigation">
<div id="menuToggle">
<input type="checkbox" id="mycheckbox"/>
<span></span>
<span></span>
<span></span>
<?php
wp_nav_menu(
array(
'theme_location' => 'top_menu',
'container' => 'ul', //to prevent having a surrounding div
'menu_class' => 'site__header__menu', //my custom class
)
);
?>
</div>
</nav>
<div id="black"></div>
Currently, the display property for this div is set to none. I want it to switch to inline/block when the hamburger menu is clicked.
I attempted to accomplish this using JavaScript:
function functionTest() {
const cb = document.querySelector('#mycheckbox');
const black = document.querySelector('#black');
if (cb.checked) {
black.style["display"] = "inline";
} else {
black.style["display"] = "none";
}
}
Unfortunately, this solution did not work as expected. Your help would be greatly appreciated. Thank you in advance.