Animate WordPress wp_nav_menu

By on

I spent the last couple of days working on a solution to animating WordPress’ wp_nav_menu output. I thought I would take a moment to jot it down and share it with anyone else looking to do the same.

Once I got it started I couldn’t give in, and came up with pretty simple solution. The document ready should work in most situations. In some cases you can remove it.  You may need to alter the selector, but I tried it on both TwentyEleven and TwentyTen.

jQuery(document).ready(function($){
$(“#access .menu li”).mouseleave(function() {
$(this).children(“ul”).stop(true, true).css(‘display’,’block’).fadeOut(100);
});
$(“#access .menu li”).mouseenter(function() {
$(this).children(“ul”).stop(true, true).css(‘display’,’none’).fadeIn(400);
});
});

Enjoy!