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.

It will be difficult to explain what I need in words, so please see a live demo of the horizontal navigation menu here, http://cn.wsj.com/gb/index.asp

I want to replicate it for wordpress categories. The top menu should always show parent categories, and the drop down should show children of the parent category currently highlighted. So far I have this code.

<ul id="nav">
    <li <?php if(is_home()) {echo 'class="current_page_item"';}?>><a href="<?php bloginfo('url'); ?>">Home</a></li>
    <?php wp_list_categories('orderby=name&depth=1&title_li='); ?>
</ul>
<?php
    $cat = get_query_var('cat');
    $category = get_category ($cat);
    $categories = get_the_category();

    $subcat = get_the_category();
    $parentCatName = get_cat_name($subcat[0]->parent);
    $category_id = get_cat_ID( "$parentCatName" );

    function post_is_in_descendant_category( $cats, $_post = null )
    {
        foreach ( (array) $cats as $cat ) {
            // get_term_children() accepts integer ID only
            $descendants = get_term_children( (int) $cat, 'category');
            if ( $descendants && in_category( $descendants, $_post ) )
                return true;
        }
        return false;
    }

    if ($category->cat_ID) {
        if($category->category_parent) {
            //Displays subcategories on subcategory index
            $children = wp_list_categories("orderby=id&hide_empty=0&title_li=&child_of=".$category->category_parent."&echo=0");
        }
            else {
                //Display subcategories on parent category index
                $children = wp_list_categories("orderby=id&hide_empty=0&title_li=&child_of=".$category->cat_ID."&echo=0");
            }
        if ($children) { ?>
            <ul id="subnav">
              <?php echo $children; ?> 
            </ul>
        <?php }
    }
    elseif (is_single() && (post_is_in_descendant_category($category_id)) && $categories[0]->category_parent == $category_id ) { ?>
        <ul id="subnav">
            <?php            
                $category = get_the_category();
                $cat_term_id = $category[0]->term_id;
                $cat_category_parent = $category[0]->category_parent;
                $listcat = wp_list_categories('echo=0&child_of='.$cat_category_parent.'&title_li=');
                $listcat = str_replace("cat-item-".$cat_term_id, "cat-item-".$cat_term_id." current-cat", $listcat);
                if ( in_category( $cat_term_id ) || post_is_in_descendant_category( $cat_category_parent )) {
                    echo $listcat;
                }
            ?>
        </ul>
<?php } ?>

But the issue is how to make the hover thing work. Please help. Thanks.

share|improve this question
2  
The TwentyTen theme does something similar, only the submenus are stacked vertically. Everything is done in CSS. The trick is #access ul ul { display: none } and #access ul li:hover > ul { display: block }, which hides all sublists unless the parent list is hovered. If you base your layout on this, I think you can achieve the same effect. –  Jan Fabry Oct 26 '10 at 19:47
    
@Jan -- Pretty much. More on this technique is available at: alistapart.com/articles/dropdowns –  aendrew Feb 9 '11 at 17:39
    
@aendrew: Nice link, why didn't you include it in your answer? –  Jan Fabry Feb 10 '11 at 9:30
    
@Jan -- OP is asking for a dropline menu, not just a standard suckerfish menu. –  aendrew Feb 10 '11 at 12:23
add comment

1 Answer

You're wanting a CSS dropline menu, from what I gather.

  1. Basic example code: http://www.cssplay.co.uk/menus/pro_dropline2-5.html

  2. Tutorial, with jQuery code on making it look super spiffy (via SuperFish): http://users.tpg.com.au/j_birch/plugins/superfish/#sample4

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.