Replace Hover with Click Events in Oxygen Builder Menu

Date: 
19. October 2024
Author: 
mbs
Category: 

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
            });
        }
    });
});

Leave a Reply

Your email address will not be published. Required fields are marked *

© Copyright 2007-2024 mbsTECH.dk 
by Michael Bay Sørensen
WebGPT.ninja
Build with
and 
Oxygenbuilder
I'm using 
Ahoy