jQuery Menu Hover Intent Effect

We recently made a WordPress site for a client and needed to implement a dropdown menu. After putting in place a pure CSS version, the client requested a solution with animation and a delay when moving the mouse out of the dropdown. It was also essential that the menu would be compatible with older browsers. So after ruling out CSS animations, we wrote the following jQuery to deliver a solution that fitted our client’s specifications.

The code below is what we ended up with and needs to be placed within

$(document).ready(function(){ 

“#menu-item-18” was the of the parent <li> element that the dropdown was included within.


$('#menu-item-18').mouseenter(function() {
	clearTimeout($(this).data('timeoutId'));
	$('#menu-item-18 ul.sub-menu:first').css('display', 'block').stop().animate({
		top: 50,
		opacity: 1
	}, 350);
}).mouseleave(function() {
	timeoutId = setTimeout(function() {
		$('#menu-item-18 ul.sub-menu:first').fadeOut(function() {
			$('#menu-item-18 ul.sub-menu:first').css('opacity', '0');
		});
	}, 200);
	$("#menu-item-18,#menu-item-18 ul.sub-menu:first").data('timeoutId', timeoutId);
});

If you would like help applying this to your website or are experiencing any issues, leave a comment and we will try our best to help!

Free Graphics, Icons, Tutorials
Free Graphics Free Christmas Vector Icon Graphics Pack 2017Free Fitness Vector Icons Graphics PackFree Camping Vector Graphics PackFree Summer Graphics PackFree File Icon PackFree Fast Food Vector Graphics
Sharing is caring...
Like & Follow
Share the love, share this page! Facebook Twitter Google Digg Reddit LinkedIn Pinterest Email
Close [X]
The Web Taylor
1000 Lakeside North Harbour Portsmouth, Hampshire PO6 3EN
02392 123358