Skip to content

Instantly share code, notes, and snippets.

@JuliaKiselyova

JuliaKiselyova/megamenu_overlay.js

Last active February 14, 2024 10:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JuliaKiselyova/44b59286d8767355d44c72b8e434b391 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JuliaKiselyova/44b59286d8767355d44c72b8e434b391 to your computer and use it in GitHub Desktop.
Download ZIP
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
Raw
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");
});
});
});
Raw
styles.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 {
z-index: 999;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment