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!