How to disable menu delay on hover and on unhover - Support

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
February 3, 2021 at 10:29 pm #1277473
G
Participant
I’ve looked through the forums and can’t find anything that works with this problem.

The standard behavior with Enfold is for the sub-menu items to perform a fade-in and fade-out transition when hovering over a menu item.

Let’s use the enfold Demo as an example: https://kriesi.at/themes/enfold-2017/

When you hover over “Portfolio” you’ll see the mega menu fade in, once your mouse leaves the area, there is a pause and then it fades out.

I’ve figured out how to remove the fade-in and fade-out by disabling all animations using the code below as specified here:

Animation
```
 /* Disable animation sitewide */
*{
opacity: 100!important;
 /*CSS transitions*/
 -o-transition-property: none !important;
 -moz-transition-property: none !important;
 -ms-transition-property: none !important;
 -webkit-transition-property: none !important;
 transition-property: none !important;
 /*CSS transforms*/
 -o-transform: none !important;
 -moz-transform: none !important;
 -ms-transform: none !important;
 -webkit-transform: none !important;
 transform: none !important;
 /*CSS animations*/
 -webkit-animation: none !important;
 -moz-animation: none !important;
 -o-animation: none !important;
 -ms-animation: none !important;
 animation: none !important;
}
```
The problem is that the menu items still have a delay when hovering over and when leaving (the dropdown takes a second to appear on hover and then another second to disappear when leaving). I want to see the menu instantly upon hovering and instantly go away when leaving. It looks like it’s a javascript issue. I tried looking through avia.js, but could not find the menu animate or delay in there.

Any help is much appreciated.
February 5, 2021 at 3:29 am #1277816
G
Participant
I’m getting closer to a solution.

I discovered that the delay and transitions for the mega menu are in /js/avia-snippet-megamenu.js

I still need it for normal dropdown menus, but this is a start.

Line 176
```
			//bind event for mega menu
			megaItems.each(function(i){

				$(this).hover(

					function()
					{
						delayCheck[i] = true;
						setTimeout(function(){megaDivShow(i); },options.delay);
					},

					function()
					{
						delayCheck[i] = false;
						setTimeout(function(){megaDivHide(i); },options.delay);
					}
				);
			});
```
How do I remove the delay without breaking the code?

I’ll also need to copy this file to my child theme so future updates won’t be overwritten. I found this to put in my functions.php file
```
/* custom avia-snippet-megamenu.js */
add_action( 'wp_enqueue_scripts', 'wp_change_megamenu_script', 100 );
function wp_change_megamenu_script() {
    wp_dequeue_script('avia-megamenu');
    wp_enqueue_script('avia-megamenu', get_stylesheet_directory_uri().'/js/avia-snippet-megamenu.js', array('avia-default'), '', true);
}
```
Sadly, the above code doesn’t work. When I clear cache, etc and view source and still see the original avia-snippet-megamenu.js being referenced and not my custom one within my child theme.

Compression is disabled BTW.

Any idears?
February 5, 2021 at 3:58 am #1277817
G
Participant
OK, I figured out how to remove the delay from the megamenu!

it was LINE 26. I set it from 300 to 0.
delay:0

I also edited the functions.php file to simply:
```
wp_dequeue_script('avia-megamenu');
wp_enqueue_script('avia-megamenu', get_stylesheet_directory_uri().'/js/avia-snippet-megamenu.js', array('avia-default'), '', true);
```
Without it being within a function and that worked.
Now my only issue is the mouseout delay on normal dropdown menus. Can’t find that anywhere.
February 8, 2021 at 12:01 am #1278509
Mike
Moderator
Hi,
Sorry for the very late reply and thanks for sharing what you have found, I tried testing the normal dropdowns by first adding your anti-animation css above, then I resource blocked css & js in the browser to isolate the file causing the delay and it was \js\avia-snippet-megamenu.js, I then found starting at line 212 this function:
```
currentItem.on('mouseleave', function()
					{
						sublist.stop().animate({opacity:0}, function()
						{
							sublist.css({visibility:'hidden'});
						});
					});
```
please note that the .animate() effect has a default duration of 400ms but we can set a time of zero like this:
```
currentItem.on('mouseleave', function()
					{
						sublist.stop().animate({opacity:0},0, function()
						{
							sublist.css({visibility:'hidden'});
						});
					});
```
please try making this change in your child theme avia-snippet-megamenu.js file and clear your browser cache.
btw: here’s another article about .animate() parameters if you wish to edit further.

Best regards,
Mike
February 8, 2021 at 8:44 pm #1278804

G
Participant

Mike, you are a miracle worker! Your solution worked perfectly.
I never would have thought that the code for normal dropdowns would be within the \js\avia-snippet-megamenu.js file.

Good to know and Thanks!

February 9, 2021 at 6:40 am #1278929

Jordan Shannon
Inactive Moderator

Hi,

I’m glad this was resolved. If you need additional help, please let us know here in the forums.

Best regards,
Jordan Shannon
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘How to disable menu delay on hover and on unhover’ is closed to new replies.