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 am developing a WordPress site and trying to display my menu correctly. How can I display all Parent items but only show the Child items when it's Parent has been selected. I hope that makes sense. Below is what I'm trying to achieve:

What I want to achieve

And below is basically how it currently looks right now:

What's actually happening

Here is my CSS code:

/*** Single Level ***/
#widget_nav_menu, #widget_nav_menu ul {
    clear: both;
    float: left;
    padding: 0;
    margin: 0;
    list-style: none; 
    line-height: 1;

}
    #widget_nav_menu a {
        display: block;
        font-family: Arial, sans-serif;
        font-size: 13px;
        color: #174267;
        text-decoration: none;
        padding: 7px 0px 7px 7px;
    }
    #widget_nav_menu a:current,
    #widget_nav_menu a:hover {
        width: 213px;
        background-image: url(images/hover_bg.png);
        background-position: right -5px;
        position: absolute;
        z-index: 1005;
        color: #fff;
        margin-right: -17px;
    }
    #widget_nav_menu li.current_page_item a {
        width: 213px;
        background-image: url(images/hover_bg.png);
        background-position: right -5px;
        color: #fff;
        margin-right: -17px;
    }
    #widget_nav_menu li {
        float: left;
        background: #f4f8fa;
        width: 202px;
        border-bottom: 1px solid #c3ced5;
        height: 34px;
        text-indent: none;
        color: #174267;
    }

        #widget_nav_menu li ul {
            position: absolute;
            width: 213px;
            left: -999em;
        }
        #widget_nav_menu li:hover ul {
            left: auto;
        }

        #widget_nav_menu li:hover ul, #widget_nav_menu li.sfhover ul {
            left: auto;
        }

            /*** Multi Level ***/
            #widget_nav_menu li ul ul {
                margin: -1em 0 0 10em;
            }

            #widget_nav_menu li:hover ul ul, #widget_nav_menu li.sfhover ul ul {
                left: -999em;
            }

        #widget_nav_menu li ul li.current_page_item a:hover {
            width: 213px;
            background-image: url(images/hover_bg.png);
            background-position: right -5px;
            color: #fff;
            margin-right: -17px;
        }

I'm not sure if I need to use the a:first-child and a:last-child pseudo selectors and etc. Can anyone shed some light on this please? I'm sort of half way there I think, just need to get the Child items sitting in between the Parent items, instead of the drop down overlay...

share|improve this question
    
Without having a traditional horizontal menu, I believe you're going to need to use jQuery to achieve this. Which is slightly out of scope for this forum, but I would start here with search terms similar to these: stackoverflow.com/search?q=jquery+vertical+accordion+menu –  GhostToast Jan 23 '13 at 14:43
    
You can use a Walker Class wordpress.stackexchange.com/questions/tagged/walker, please alter your question as CSS is considered off-topic and will be closed. –  Wyck Jan 24 '13 at 5:51
add comment

1 Answer

Add this to your function.php file:

function hierarchical_submenu_get_children($post, $current_page) {
$menu = null;
// Get all immediate children of this page
$children = get_pages('child_of=' . $post->ID . '&parent=' . $post->ID . '&sort_column=menu_order&sort_order=ASC');
if ($children) {
    $menu = "\n<ul>\n";
    foreach ($children as $child) {
        // If the child is the viewed page or one of its ancestors, highlight it
        if (in_array($child->ID, get_post_ancestors($current_page)) || ($child->ID == $current_page->ID)) {
            $menu .= '<li class="sub-menu"><a href="' . get_permalink($child) . '" class="sub-menu current-item">' . $child->post_title . '</a>';
        } else {
            $menu .= '<li><a href="' . get_permalink($child) . '">' . $child->post_title . '</a>';
        }
        // If the page has children and is the viewed page or one of its ancestors, get its children
        if (get_children($child->ID) && (in_array($child->ID, get_post_ancestors($current_page)) || ($child->ID == $current_page->ID))) {
            $menu .= hierarchical_submenu_get_children($child, $current_page);
        }
        $menu .= "</li>\n";
    }
    $menu .= "</ul>\n";
}
return $menu;

}

Call in your sidebar like so:

<?php echo hierarchical_submenu($post); ?>
share|improve this answer
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.