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
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!
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.
Nice for this simple code. It’s very useful when we are not an expert. Thank you.
Hello William,
I am writing you because I need a little help following your article https://bigwilliam.com/simple-sub-menu-show-hide-in-wordpress-with-jquery/
It works perfectly but when integrating it in WordPress and using ‘click’ to show the sub-menu, the browser follows the link # and it goes nowhere. What value should I put in the link field or how should I create the menu?
Thanks for help.