Delay Onmouseoff In Template Menu
Dave
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
Dave
Accepted AnswerHello, 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
Rashida Rahman
Accepted AnswerHi 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
Dave
Accepted AnswerThanks 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.