JavaScript code to add overlay functionality to mega menu items on a web page. When you hover over each menu item, an overlay is displayed behind it, providing a lightbox effect

megamenu_overlay.js

document.addEventListener("DOMContentLoaded", function () {
  // Create an overlay for each mega menu item
  const megaMenuItems = document.querySelectorAll(".jet-mega-menu-item");

  megaMenuItems.forEach(function (megaMenuItem) {
    const overlay = document.createElement("div");
    overlay.className = "overlay";
    megaMenuItem.appendChild(overlay); // Append the overlay to the menu item

    megaMenuItem.addEventListener("mouseenter", function () {
      megaMenuItem.classList.add("jet-mega-menu-item--hover");
    });

    megaMenuItem.addEventListener("mouseleave", function () {
      megaMenuItem.classList.remove("jet-mega-menu-item--hover");
    });
  });
});

style.css

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  z-index: -1; 
  pointer-events: none;
}

.jet-mega-menu-item-has-children.jet-mega-menu-item--hover .overlay {
  display: block;
  z-index: 998;
}

.jet-mega-menu-item--hover .jet-mega-menu-mega-container, .jet-mega-menu-item--hover .jet-mega-menu-item__inner {
  position: relative;
  z-index: 999; 
}