Skip to content

Instantly share code, notes, and snippets.

@JuliaKiselyova
Last active October 17, 2023 11:14
Show Gist options
  • Select an option

  • Save JuliaKiselyova/7878de148950825c6023ec16f92da856 to your computer and use it in GitHub Desktop.

Select an option

Save JuliaKiselyova/7878de148950825c6023ec16f92da856 to your computer and use it in GitHub Desktop.
This JavaScript code improves the mobile menu by enabling it to close automatically when users click outside the menu area or scroll, providing a more user-friendly navigation experience.
document.addEventListener("DOMContentLoaded", function () {
const mobileMenu = document.querySelector(".jet-mobile-menu");
if (mobileMenu) {
const menuUniqId = JSON.parse( mobileMenu.dataset.menuOptions ).menuUniqId
const toggleButton = mobileMenu.querySelector(".jet-mobile-menu__toggle");
let menuOpen = false;
function toggleMenu() {
menuOpen = !menuOpen;
const action = menuOpen ? 'openMenu' : 'closeMenu';
window.jetMenu.eventBus.$emit(action, { "menuUniqId": menuUniqId });
}
toggleButton.addEventListener("click", function (event) {
toggleMenu();
event.stopPropagation();
});
function closeMenuOnClickOutside(event) {
if (menuOpen && !event.target.closest(".jet-mobile-menu")) {
toggleMenu();
}
}
function closeMenuOnScroll() {
if (menuOpen) {
toggleMenu();
}
}
window.addEventListener("scroll", closeMenuOnScroll);
document.addEventListener("click", closeMenuOnClickOutside);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment