Controlling WordPress Navigation with jQuery

I had a client of mine need to show and hide sub navigation lists depending on the main-menu li hover event. You can do all sorts of animations too, but this code is simple show and hide to demonstrate it. Below is the code:

$(document).ready(function() {
$("ul#menu-main > li").hover(
function () {
$("#menu-main li.current-menu-item > ul").hide();
$("#" + $(this).attr("id") + " ul.sub-menu").show();
},
function () {
$("#" + $(this).attr("id") + " ul.sub-menu").hide();
$("#menu-main li.current-menu-item > ul").show();
}
);

$("#menu-main ul.submenu").hide();
$("#menu-main ul.current-menu-item ul").show();
});

Leave a Reply

Your email address will not be published. Required fields are marked *