See demo here: Click here
THIS IS ONLY WORKING ON DESKTOP
Let's assume you already have Oxygen builder (Plus of cause WordPress!), and setup the theme 🙂
Then use the the main "Menu" block from Oxygen and add this CSS and JS:
Start with turning off the hover function, completely.
Use this in a code block, or in global CSS file
Maybe you should use "!important;" so it's totally fired off
/* Hide sub-menu by default */
.oxy-nav-menu .sub-menu {
display: none; /* Hide the submenu */
}
/* Disable hover effect */
.oxy-nav-menu .menu-item-has-children:hover .sub-menu {
display: none; /* Ensure submenu doesn't show on hover */
}
/* Show sub-menu when parent is active */
.oxy-nav-menu .menu-item-has-children.active > .sub-menu {
display: block; /* Show submenu when parent is active */
}
Then add this JS
document.addEventListener("DOMContentLoaded", function () {
// Get all menu items with submenus
const menuItems = document.querySelectorAll(".oxy-nav-menu .menu-item-has-children");
menuItems.forEach((menuItem) => {
// Add click event listener
menuItem.querySelector("a").addEventListener("click", function (e) {
e.preventDefault(); // Prevent default anchor behavior
// Toggle active class for submenu display
menuItems.forEach(item => {
if (item !== menuItem) {
item.classList.remove("active"); // Close other submenus
}
});
menuItem.classList.toggle("active"); // Toggle current submenu
});
});
// Close the submenu when clicking outside
document.addEventListener("click", function (event) {
if (!event.target.closest(".oxy-nav-menu")) {
menuItems.forEach(item => {
item.classList.remove("active"); // Close all submenus
});
}
});
});
Liked this article? Please follow me on TwitterFollow @baysorensen