具有悬停效果的水平下拉类别

时间:2010-10-26 作者:RichZenMaster

很难用语言来解释我需要什么,所以请在这里观看水平导航菜单的实时演示,http://cn.wsj.com/gb/index.asp

我想为wordpress类别复制它。顶部菜单应始终显示父类别,下拉菜单应显示当前高亮显示的父类别的子类别。到目前为止,我有这个代码。

<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 } ?>
但问题是如何让悬停功能发挥作用。请帮忙。谢谢

1 个回复
SO网友:aendra

从我收集的信息来看,您需要一个CSS dropline菜单。

基本示例代码:http://www.cssplay.co.uk/menus/pro_dropline2-5.html

教程,使用jQuery代码使其看起来超级漂亮(通过SuperFish):http://users.tpg.com.au/j_birch/plugins/superfish/#sample4

结束

相关推荐

组合多个javascrip和css文件

是否有任何插件可以自动组合页面上使用的所有javascript和css文件?虽然我可以手动组合它们,但我希望避免它们,因为一些插件添加了它们的脚本和css。另外,不同的页面上可能需要不同的脚本,所以我不希望每个页面上都有一个大脚本。我不是在寻找gzip、minifing或缓存控制,因为我已经实现了它们。谢谢