Display certain items of a WordPress menu - css

Question

I generate a menu in Wordpress that has three layers. I do that with the code:
wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'SecondaryNavigation'));
Wordpress generates a menu like this:
<div class="menu-mainnavigation_de-container">
<ul id="menu-mainnavigation_de" class="SecondaryNavigation">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39">
Home
<ul class="sub-menu">
<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44">Einführung</li>
<li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43">Aktuelles</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-30 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-40">
Der Tell
<ul class="sub-menu">
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-30 current_page_item menu-item-42">Beschreibung</li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41">Topographie</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-51">
Forschung
<ul class="sub-menu">
<li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53">Forschungsgeschichte</li>
<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52">Forschungsprobleme</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-65">
Kampagnen
<ul class="sub-menu">
<li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-64">
Ausgrabung 2010
<ul class="sub-menu">
<li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63">Grabungsstelle C – Haus I (Sq. 6644-5, 6744-6 & 6844-6)</li>
</ul>
</li>
</ul>
</li>
</ul>
I have to divide the menu into two menues: In the header on the top, only the first layer of the menu is visible. This is very easy with the depth-call of wp_nav_menu and works just fine.
In the Sidebar I want to display the corresponding second and third level (everything under the class .sub-menu) of the menu, depending what was selected in the header. I tried to do this via CSS with the two simple lines:
.SecondaryNavigation {
display: none;
}
.SecondaryNavigation .current-menu-ancestor .sub-menu {
display: block;
}
Unfortunately, this does not work. How can I display only the second and third level of my menu, depending on what was selected in the primary level? Wordpress assigns the corresponding classes, like .current-menu-ancestor or .sub-menu, so it must be possible in some way, right?
Thanks for your help!
All the best
Sebastian

Answer 1

I would simply create the secondary menus and then list on the pages accordingly, which will be quite simple and effective.
Let me know if you need further help.