$conf, $runtime; function_exists('chdir') AND chdir(APP_PATH); $r = 'mysql' == $conf['cache']['type'] ? website_set('runtime', $runtime) : cache_set('runtime', $runtime); } function runtime_truncate() { global $conf; 'mysql' == $conf['cache']['type'] ? website_set('runtime', '') : cache_delete('runtime'); } register_shutdown_function('runtime_save'); ?>css - Vertical Sidebar Menu Parent and Child not displaying correctly|Programmer puzzle solving

Programmer puzzle solving

    最新消息：Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)
    你的位置： HOME>matter>css - Vertical Sidebar Menu Parent and Child not displaying correctly

    css - Vertical Sidebar Menu Parent and Child not displaying correctly

    matteradmin9PV0评论
    Closed. This question is off-topic. It is not currently accepting answers.

    Your question should be specific to WordPress. Generic PHP/JS/HTML/CSS questions might be better asked at Stack Overflow or another appropriate site of the Stack Exchange network. Third party plugins and themes are off topic.

    Closed 11 years ago.

    Improve this question

    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:

    (image not available anymore)

    And below is basically how it currently looks right now:

    (image not available anymore)

    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...

    Closed. This question is off-topic. It is not currently accepting answers.

    Your question should be specific to WordPress. Generic PHP/JS/HTML/CSS questions might be better asked at Stack Overflow or another appropriate site of the Stack Exchange network. Third party plugins and themes are off topic.

    Closed 11 years ago.

    Improve this question

    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:

    (image not available anymore)

    And below is basically how it currently looks right now:

    (image not available anymore)

    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...

    • menus
    • css
    • sidebar
    Share Improve this question edited Jan 8, 2019 at 21:15 Glorfindel 6113 gold badges10 silver badges18 bronze badges asked Jan 23, 2013 at 13:38 Mark O'DonoghueMark O'Donoghue 213 bronze badges 2
    • 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/search?q=jquery+vertical+accordion+menu – GhostToast Commented Jan 23, 2013 at 14:43
    • You can use a Walker Class wordpress.stackexchange/questions/tagged/walker, please alter your question as CSS is considered off-topic and will be closed. – Wyck Commented Jan 24, 2013 at 5:51
    Add a comment  | 

    1 Answer 1

    Reset to default 0

    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); ?>

    Articles related to this article

    Post a comment

    comment list (0)

    1. No comments so far