Here’s a simple way to show a sub-menu when it’s parent is hovered over. This uses jQuery and was used for WordPress. It works with multiple layers of sub-menus. This assumes that your sub-menu starts out ‘hidden’ via your css file. i.e. “.sub-menu { display: none; }”


/* navigation sub-menu display */

// Change 'hover' to 'click' if you want to
$('.nav li > .sub-menu').parent().hover(function() {
var submenu = $(this).children('.sub-menu');
if ( $(submenu).is(':hidden') ) {
$(submenu).slideDown(200);
} else {
$(submenu).slideUp(200);
}
});

See the Pen Show/Hide sub-menu items with jQuery by William (@bigwilliam) on CodePen.
0

4 responses to “Simple sub-menu show / hide in WordPress with jQuery

  1. Hi

    I like the look of this bit of JQuery but I can’t get it to work. Do you have a demo somewhere?

    Thanks!

    1. Sorry, I don’t have an example up at the moment. I created one just now: http://jsfiddle.net/6AvEX/1/.

      I’ll also add an HTML snippet to this so you can see what the markup should look like.

      edit: moved this to CodePen.io. Article has been updated above.

Leave a Reply

Your email address will not be published.