Only show the sub menu when the parent is selected with the new wp_nav_menu in WordPress 3.0
I just spent two hours trying to hide the submenu for a menu item that is not selected in the new menu system in WordPress 3.0. First i found this post in the WordPress forums where someone had built a “Custom Walker” but it was for a slightly different scenario and it was also a really complicated solution. Then i realized that i can do this super simple with jQuery. All you need is two lines of codes.
$(document).ready(function () {
$(".sub-menu").hide();
$(".current_page_item .sub-menu, .current_page_parent .sub-menu").show();
$(".sub-menu li").after("<li class='sub-menu-seperator'>|</li>");
});
This will hide all sub-menus, and then if a parent happens to have the class .current_page_item we show the sub-menu. My god i love jQuery.
Update:
As sushicodeur suggest you could of course do this only with CSS, it’s basically the same thing.
.sub-menu { display: none; }
.current_page_item .sub-menu, .current_page_parent .sub-menu { display: block; }
Hi, this seems like exactly what I need although I’m relatively new to JQuery and WordPress – could you give me a pointer as to where this code should appear?
Many thanks.
Hi!
All you need to do is include jquery on your page. Im sure you find loads of “Jquery tutorials” on Google.
Then you just place this code in your “main template” so that it’s loaded on every page. For example in the header och in the footer template file.
You could even do that only using CSS, without javascript and jquery :
.sub-menu { display: none; }
.current_page_item .sub-menu, .current_page_parent .sub-menu { display: block; }
If you read the full thread, that was the first solution I was proposing (using slightly different selectors), before diving into the custom walker (which I found to be a nicer solution
Ahh .. that’s true. Now i feel stupid
You just dismissed it as a hack so i kind of not read it hehe. Thanks for the comment! I will add it to the post.
Could this method be used just to show the children of the section you are currently in, hiding the main navigation on all pages and just showing the children in that section. Struggling to work this one out… Any ideas?
Matti,
I *think* I got this figured out. I needed to do the exact same thing. Searched a lot & decided that this jquery method was probably best. I don’t really know jquery so there is probably a better way to do what I’ve done but here’s how I got it to show only the Page Item & sub menu for the page that you’re on.
$(document).ready(function () {
$(“#sidebar .menu-item”).hide();
$(“#sidebar .sub-menu”).hide();
$(“#sidebar .menu-item.current_page_item, #sidebar .menu-item.current_page_parent”).show();
$(“#sidebar .menu-item.current_page_item .sub-menu, #sidebar .menu-item.current_page_parent .sub-menu”).show();
$(“#sidebar .menu-item.current_page_item .sub-menu .menu-item, #sidebar .menu-item.current_page_parent .sub-menu .menu-item”).show();
});
My method with css only
#nav-left .children {
display: none;
}
#nav-left .current_page_item ul {
display: block;
}
#nav-left .current_page_item ul ul{
display: none;
}
#nav-left .current_page_parent ul{
display: block;
}
#nav-left .current_page_parent ul ul {
display: none;
}
#nav-left .current_page_ancestor ul {
display: block;
}
#nav-left .current_page_ancestor ul ul {
display: none;
}
#nav-left .current_page_parent ul .current_page_item ul {
display: block;
}
#nav-left .current_page_parent ul .current_page_item ul ul {
display: none;
}
#nav-left .current_page_ancestor ul .current_page_parent ul {
display: block;
}
#nav-left .current_page_ancestor ul .current_page_parent ul ul {
display: none;
}
#nav-left .current_page_ancestor ul .current_page_parent ul .current_page_item ul {
display: block;
}
#nav-left .current_page_ancestor ul .current_page_parent ul .current_page_item ul ul {
display: none;
}
#nav-left .current_page_ancestor .current_page_ancestor ul {
display: block;
}
I have a menu that is 3 levels deep. Using this code hides sub-menus when viewing another parent (as expected), but if I’m on the main page of one particular 1st level menu item all 3rd level navigation items are also displayed (only want them to be displayed if viewing a 2nd level parent). Furthermore, when I select a 3rd level navigation item, the whole menu collapses completely. I tried messing around with it, adding additional selectors but I can’t seem to pinpoint the correct ones.
Thoughts? (man, that sounded way more complex than it needed too)