Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I would like to expand only the active part of the sidebar menu and hide the parts which have nothing to do with the actual selection. Just like how its done on every Explorer like file manager, or how it is with accordion menus.

In the default TwentyTen theme, this is the class definition for the active submenu:

menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor

and this is the one for a non-active submenu:

menu-item menu-item-type-post_type menu-item-object-page

So I'm thinking about using something like:

li .menu-item ul .sub-menu { display: none; }
li .current-menu-parent ul .sub-menu { display: inherit; }

Would something like this work? It must be a fairly common problem, but I have not found a single solution with Google.

To have an idea why it’s important to make the menu smaller, here is the site I'm working on where the menu is overly complicated: http://kek.org.hu/kozossegikertek

share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

I use just such a menu in my Oenology Theme. Feel free to use the sidebar menu CSS to suit your needs! Rather than try to post it all here, I'll just link to the Oenology GitHub repository.

EDIT:

Here's where the sidebar navigation menu style definitions start.

share|improve this answer
    
Thanks, I solved my specific case with just two lines in CSS, as I only had a two level menu. But I run into a CSS issue, can you have a look at it? stackoverflow.com/questions/5851738/… –  zsero May 1 '11 at 22:03
    
I just stopped by your other question. Looks like you got it sorted out! –  Chip Bennett May 2 '11 at 0:32
add comment

Based on Chip Bennett's answer here is the solution I ended up using. I recommend it for someone looking for how to hide a sub-menu of a two-level menu:

.widget_nav_menu li.menu-item ul.sub-menu {
    display: none;
}

.widget_nav_menu li.current-menu-item ul.sub-menu ,
.widget_nav_menu li.current-menu-ancestor ul.sub-menu {
    display: inherit;
}
share|improve this answer
    
Would you mind explaining further where this is supposed to be placed, for CSS dummies? (when placed in the blocco style.css file, in several spots, it didn't seem to hide the sub-menu as expected: press75.com/themes/blocco-theme-demo ) Thanks! –  user11039 Dec 12 '11 at 1:55
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.