Question

I have a WordPress site where I’m trying to solve a very simple problem. I have a primary menu at the top and a secondary menu at the left side. The top menu contains level 1 items while the left menu has all the items. For the left menu I am using the built-in “Custom menu” widget.

To simplify the looks I would like to only show the items on the left which are relevant to the current area, namely items with current-menu-ancestor.

1. Is there any way to do it elegantly, by generating only the needed code in HTML? Either by using some custom function in functions.php (I’m using a Twenty Eleven child theme), or by some “Advanced Custom Menu” plugin if there is such?

2. I am trying to do it in CSS, and I’m almost there. I selected the items green what I like to keep and red what I would like to hide, but I cannot apply a CSS rule to display: none the red items, because then it hides the green items too.

My CSS so far is this:

#secondary ul {background: red;}

#secondary li.current-menu-ancestor ul,
#secondary li.current-menu-item ul {background: green;}

Here is a sample page where you can see which are the red items I’m trying to hide and which are the green items I’m trying to keep.

http://kozossegikertek.hu/csatlakozz/

I would like to have only the green items visible on the left menu.

Answer 1

OK, I did the pure CSS solution. I’m still up for a WP specific solution if someone can do it:

#secondary li a {
display: none;
}

#secondary li.current-menu-item ul a,
#secondary li.current-menu-ancestor ul a {
display: inherit;
}