Delay Onmouseoff In Template Menu - Question | JoomShaper

Delay Onmouseoff In Template Menu

D

Dave

Template 1 week ago

Hello, I see that this issue has been risen several time across the forum however nobody answered to this relatively easy yet very important issue.

If you create a menu with 3 levels such as MENU ITEM > SUB MENU ITEM XXX > SUB SUB MENU ITEM 1 -------------------> SUB SUB MENU ITEM 2 -------------------> SUB SUB MENU ITEM 3 -------------------> SUB SUB MENU ITEM 4

and you try to go from SUB ITEM XXX TO SUB SUB MENU ITEM 4 the menu closes.

I have been trying to play around with animation, keyframes, transition delay, visibility and opacity and I have spent 3 hours trying to apply any possible solutions however nothing works.

Is there someone that can help me to apply 2/3 seconds of delay when hovering away from the SUB MENU ITEM XXX so that the lower menu items do not closes away immediately?

Thanks Dave

0
4 Answers
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 week ago

Hi there!

Thanks for your query!

Sorry to say that there is no default way to do that. And customization support is prohibited here.

However, the following link may help you on this:

https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

Best Regards

0
D
Dave
Accepted Answer
1 week ago

Thanks Rashida. I will look at your link. The thing is that I have tried to apply this simple CSS method and it doesn't work, so I think there might be some Javascript conflict that is in the template. Anyway, once I find the solution I will post it here because I am sure many others will need this.

0
D
Dave
Accepted Answer
1 week ago

Hello, the dev I work with has found a nice solution in order to avoid the sudden closing in your template's main menu while moving through the corridorsa of the items and here it is:

.sp-megamenu-parent .sp-has-child > .sp-dropdown { display:block; visibility: hidden; opacity: 0.0; transition: visibility .55s,opacity .55s ease-in-out !important; -moz-transition: visibility .55s,opacity .55s ease-in-out !important; -webkit-transition: visibility .55s,opacity .55s ease-in-out !important; } .sp-megamenu-parent .sp-has-child:hover > .sp-dropdown { opacity: 1.0; visibility: visible;
}

Have a good day. Dave

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 week ago

Hi,

Really glad that you have made it!

Have a good day to you too:)

0