I am learning JavaScript and am trying to wrap my head around creating a nav megamenu. Basically, each button has a div after it that contains the megamenu content. Hovering OR clicking on the button adds a class to the dropdown (I could also use a show/hide within the JS, not sure which is better). The class adds opacity and visibility to the div.
I've created a "container" variable so it's only listening within the navbar, and then looping through the buttons to add the listener with nextElementSibling, but I can't seem to get it working.
Markup:
<nav id="main-nav">
<div class="nav-content">
<div class="nav-item">
<button class="nav-dropdown">Services</button>
<div class="nav-submenu">
(Links)
</div>
</div>
<div class="nav-item">
<button class="nav-dropdown">Locations</button>
<div class="nav-submenu">
(Links)
</div>
</div>
<div class="nav-item">
<button class="nav-dropdown">About Us</button>
<div class="nav-submenu">
(Links)
</div>
</div>
</div>
</nav>
JS:
( function() {
// initiating vars
var desktop, mobile, container;
// Breakpoints
desktop = window.matchMedia("(min-width: 769px)");
mobile = window.matchMedia("(max-width: 768px)");
// Target only navbar
container = document.getElementById( 'main-nav' );
if ( ! container ) {
return;
}
// Desktop dropdown click controls
if (desktop.matches) {
// only look for .nav-dropdown class
const desktopParents = container.querySelectorAll(".nav-dropdown");
// get each instance of .nav-dropdown
for (const desktopParent of desktopParents) {
// if a button is clicked, add class to that button's dropdown only
document.addEventListener('click', function(event) {
// getting correct dropdownby targeting next sibling of button (div.nav-submenu)
var dropdown = desktopParent.nextElementSibling;
var desktopParent = desktopParent.contains(event.target);
// adding and removing show dropdown class
if (dropdown.classList.contains('nav-active')) {
dropdown.classList.remove('nav-active');
} else {
dropdown.classList.add('nav-active');
}
});
}
}
}() );
Your event listener is attached to the whole document so the event is triggered when someone clicks anywhere on the page. Change document to your button variable desktopParent for the events to be triggered when the button is clicked. You can refer to the button element using this inside the event listener's callback function.
desktopParent.addEventListener('click', function(event) {
// getting correct dropdownby targeting next sibling of button (div.nav-submenu)
var dropdown = this.nextElementSibling;
var desktopParent = this.contains(event.target);
...
}
Here is an example