WordPress.org

Ready to get started?Download WordPress

Forums

Create collapsing sub-menus with CSS & WordPress 3.0 (8 posts)

  1. Dalton
    Member
    Posted 3 years ago #

    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 http://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.

  2. mStudios
    Member
    Posted 3 years ago #

    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!

  3. CSD-Images
    Member
    Posted 3 years ago #

    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.

  4. carnini
    Member
    Posted 3 years ago #

    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.

  5. Dalton
    Member
    Posted 3 years ago #

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

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

  6. ohbrooke
    Member
    Posted 3 years ago #

    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!

  7. carnini
    Member
    Posted 3 years ago #

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

  8. Dalton
    Member
    Posted 3 years ago #

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

    Cheers,
    Dalton

Topic Closed

This topic has been closed to new replies.

About this Topic