Create collapsing sub-menus with CSS & WordPress 3.0

  • I had a tough time figuring out the CSS for creating collapsing sub-menus with the new WordPress menu system, so I though sharing this code would be helpful. This was originally posted on my blog at https://daltonrooney.com/wordpress/archives/173

    WordPress has lots of CSS hooks for current pages, parent pages, current page ancestor pages, etc… to the point where it can get very hard to keep the hierarchy straight. Here’s the code I came up with:

    .widget_nav_menu ul.sub-menu {
display: none;
}
.widget_nav_menu .current_page_parent ul.sub-menu {
display: block;
}
.widget_nav_menu .current_page_ancestor ul.sub-menu {
display: block;
}
.widget_nav_menu li.current-menu-item ul.sub-menu {
display: block;
}
.widget_nav_menu ul.sub-menu li.current-menu-item ul.sub-menu {
display: block;
}
.widget_nav_menu ul.sub-menu ul.sub-menu {
display: none;
}
.widget_nav_menu ul.sub-menu li.current_page_ancestor ul.sub-menu {
display: block;
}
.widget_nav_menu a {
color: #666666;
}
.widget_nav_menu li.current-menu-item a {
color: #222222;
}
.widget_nav_menu li.current-menu-item ul.sub-menu a {
color: #666666;
}

    You can obviously combine most of these selectors, but I prefer to keep them separate to make it easier to troubleshoot. I added a different color border around each element while I was working on it so I could quickly see exactly which styles were being applied.

    I should also note that this was developed specifically for the Custom Menus widget (hence the .widget_nav_menu classes), so you should adjust this to match your menu container div if you insert your menus another way.

Viewing 7 replies - 1 through 7 (of 7 total)

  • THANK YOU! Moving a 100 page Joomla site to WordPress and it is almost 2am and I am sooo… happy that I do not have to try and figure this out now but can go to bed instead as it works – perfect!

    I used a Suckerfish menu for my site with me adding a bespoke custom class:

    ‘wp_nav_menu( array(
    ‘theme_location’ => ‘main-nav’,
    ‘menu’ => ‘main-nav’,
    ‘container’ => ‘div’,
    ‘container_class’ => ‘header-nav’,
    ‘menu_class’ => ‘sf-menu’
    )); ‘

    This calls the menu I’ve defined in the Functions file and assigns the container a class of header-nav and the menu class sf-menu

    All I had to then is customise the Suckerfish CSS to my styles.

    It’s an alternative to fighting with WP’s CSS styles.

    IS there another example, when I click on that demo link it sends me to another url and I don’t see the menu hide when I go to the page.
    This has been driving me nuts too on how to do this.

    Thread Starter Dalton Rooney

    (@daltonrooney)

    Oh yeah, I moved the demo example. Try here: https://demo.madebyraygun.com/portfolio/

    Click on the first slideshow to see the sub-page in the menu.

    You saved me, thank you. Why is this not better documented by WP? It took me hours before I came across this post, so THANK YOU!

    I 2nd that, saved me a ton of hours and it makes no sense why it is not documented, such a great features.

    Thread Starter Dalton Rooney

    (@daltonrooney)

    Thanks for the feedback, I think I will post this to the WP Codex so hopefully people will find it more easily.

    Cheers,
    Dalton

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Create collapsing sub-menus with CSS & WordPress 3.0’ is closed to new replies.