How to add a delay in MegaMenu item

david1992

Good evening, I got to add a login section in a MegaMenu Item, but when the user tries to use a password saved in their browser, the mega menu close immediately and the user can not log in, I need that the menu keeps about 4 or 5 seconds in order the users can use a password saved in the computers (a other system out of the menu, for that I need to add some delay to keep the menu login system)

saguaros

david1992 Hi

I understand your point but at this moment, when you not move the mouse out of the dropdown, it should hide the dropdown quickly, implementing that feature will affect all other menu items' dropdown. I think you have to customize JS on this.

Regards

david1992

I tried adding the follow code to JS folder

document.addEventListener('DOMContentLoaded', function() {
// Get all megamenu items (adjust the selector as needed)
const megamenuItems = document.querySelectorAll('.uk-nav-sub');

// Add a delay to each megamenu item
megamenuItems.forEach(item => {
    item.addEventListener('mouseenter', function() {
        // Delay the opening of the sub-menu
        const delay = 200; // Adjust the delay in milliseconds
        setTimeout(() => {
            item.classList.add('uk-open');
        }, delay);
    });
});

});

It then selects all megamenu items using document.querySelectorAll('.uk-nav-sub'). I think that is needed to adjust the selector of the megamenu items due it could have a different class name.

I hope you could help me to solve this, the code is still not working, I watch that is possible add a CSS code in the megamenu item you could provide me a code that works?

.mega-menu {
transition: opacity 0.3s ease-in-out;
}

.mega-menu.show {
opacity: 1;
}

.mega-menu.hidden {
opacity: 0;
}

I tried to add this CSS code, but it not works