[Resolved] In GP .mega-menu, how to delay opening the sub-menu?

[Ronald]

Hi Tom a/o colleagues,

I’m using the GeneratePress .mega-menu layout for the navigation, with a fairly big menu that occupies most of the screen width, and big sub-menus under each item.

That means that when the cursor moves from the header down to the page, it will always pass over an item in the navigation menu and open its sub-menu: this sub-menu was not intended to be opened by the user, but when open it fills a large part of the screen, and for many people this is confusing when they actually just wanted to scroll down the page.

Is it possible to have delay before opening the sub-menu? Say for example that the cursor has to stand on top of the parent item for 500ms before the sub-menu opens?

Kind regards,
Ronald Postma

[Leo]

Hi there,

Give this a shot:

.main-navigation ul ul {
    transition: opacity 500ms linear;
}

[Ronald]

Hi Leo,

Thanks for your reply, but this is just an animation delay; the sub-menu still opens directly. So when hovering down from the header to the page, the issue still occurs.

I read in older forum posts that Tom had written a script for this delay:
https://generatepress.com/forums/topic/drop-down-menu-speed/#post-164348

<script>
    jQuery( window ).load( function() {
        jQuery( '.sf-menu .menu-item-has-children' ).GenerateDropdownMenu.destroy();
        jQuery( '.sf-menu .menu-item-has-children' ).GenerateDropdownMenu({
                transition_speed: 0,
		open_delay: 0,
		close_delay: 0
        });
    });
</script>

This no longer seems to work, was this perhaps replaced with another script?
Regards,
Ronald

[Tom]

The menu no longer uses javascript at all – it’s 100% CSS.

It looks like you’ve switched the menu to open on click. Is that a better solution for you?

Let me know 🙂

[Ronald]

Hi Tom,

The open on click is not a bad solution, though I would have preferred the hover option with a delay before opening the submenu. I understand this is not possible out of the box if there is no JS involved anymore; however if there is an easy way to introduce this I’d love to know about it.

Thank you,
Ronald

[Tom]

I would have tried the same transition-delay method Leo mentioned. That should prevent the menu from being visible for however long you set the delay.

Otherwise, a javascript solution may be necessary.

[Ronald]

Hi Tom,

Thanks for the reply; I don’t want to press on with this too much, but just to explain the issue again, as it can not be solved with CSS:

If a user hovers from the header down to the page and randomly passes by a nav item, it will instantly trigger the nearly full-screen mega-menu sub-menu to open. The transition-delay will only delay the visibility, but the mega-menu sub-menu will still load and cover the screen anyway even when not intended, creating confusion with users.

That is why a javascript open-delay solution would greatly improve the UX of the full-width nav with GP mega-menu. For lack of this solution I will use the click on open, but if you have a script that could work with the current GP navigation I would appreciate using it a lot!

[Tom]

transition-delay shouldn’t actually open the menu unless the mouse stays on top of it: https://codepen.io/jhogue/pen/payuj

[Ronald]

Hi Tom,

transition-delay does open the sub-menu, regardless of it showing. See https://vimeo.com/326288834 for a screen capture of the codepen you shared. I made the delay 3 seconds, to show that if the user moves over the menu item, the sub-menu will load anyway and prevent the user from viewing/interacting with the page below the nav menu.

Obviously this is exaggerated with 3 seconds, but with the gp mega-menu I believe it is important to be able to set a delay before the opening the sub-menu, because a full-screen sub-menu will confuse/annoy people when they did not intend to open it.

I hope the issue is clear and that perhaps you agree this is worth solving.

Kind regards,
Ronald

[Tom]

Ah yes, that’s because the delay is set to the opacity, but the positioning of the menu (top). So the top value updates immediately, which means if your mouse is still on top of the invisible element, transition-delay still does its thing.

In GP, this might work:

.main-navigation ul ul {
    transition: opacity 500ms linear, left 0s ease;
}

.dropdown-hover .main-navigation:not(.toggled) ul li:hover > ul,
.dropdown-hover .main-navigation:not(.toggled) ul li.sfHover > ul {
    transition-delay: 3s;
}

[Ronald]

Hi Tom,

Unfortunately this does not work, it still just delays the opacity, but as long as the mouse stays in the area that the sub-menu will occupy after the transition-delay it still loads anyway. I want it to only load when the mouse stays on top of the parent li element, not below it. Sort of like this:
https://www.w3schools.com/code/tryit.asp?filename=G2FOTCD3IYD0

Not literally like that with the width, but how it behaves regarding hovering: how it does not continue growing when the mouse moves out of the red area.

On https://www.mamotok.net/sma/ I’ve made the sub-menu again to activate on hover and not on click, so you can see the ‘problem’ of when you hover down from the header into the page over the navigation menu and instantly open a nearly full screen (especially on smaller screens) sub-menu, like the item ‘Behandeling’ for example.

I’ve added your CSS so you can see what it does.

[Tom]

In your custom CSS, find this:

nav .main-nav .mega-menu > ul {
    position: absolute;
    width: calc(100% - 100px);
    padding: 15px 50px 30px 50px;
    left: 0 !important;
    border-bottom: 10px solid var(--green1);
    border-top: 4px solid var(--green1);
}

And remove this:

left: 0 !important;

Then, add this:

.dropdown-hover .main-navigation:not(.toggled) ul li:hover>ul, 
.dropdown-hover .main-navigation:not(.toggled) ul li.sfHover>ul {
    left: 0 !important;
}

[Ronald]

That’s fantastic Tom, it works perfectly!

Thank you very much, I really appreciate your help and the patience with which you followed up this thread!
Regards,Ronald

[Tom]

Glad I could help! 🙂

[Author]

Posts