【原创】【Jquery】仿亚马逊分类导航

由于css代码不是本人所写，所以本文中没有贴出css代码。

预览效果图：

js代码：

/******************************************
Functional Description: common.js 
Write By zhxhdean
CopyRight@zyue.com
******************************************/
$(function () {
    //首页左侧导航
    //鼠标移上
    $(".index_menu div span").bind("mouseover", function () {
        $(".js_gdfl").css("display", "none");
        $(this).addClass("js_span_fl");
        var idsp = $(this).attr("id").replace("js_sp_", "");
        var topsp = 25 * parseInt(idsp);
        if (idsp <= 6) {
            $(this).next("div").css({ "display": "block", "top": topsp + "px" });
        } else if (idsp == 7) {
            $(this).next("div").css({ "display": "block", "top": "150px" });
        } else {
            $(this).next("div").css({ "display": "block", "top": "163px" });
        }

    })
    $(".js_gdfl").bind("mouseover", function () {
        $(".js_gdfl").css("display", "none");
        $(this).prev().addClass("js_span_fl");
        $(this).css("display", "block");
    })
    //鼠标离开
    $(".index_menu div span").bind("mouseout", function () {
        $(".js_gdfl").css("display", "none");
        $(this).removeClass("js_span_fl");
    })
    $(".js_gdfl").bind("mouseout", function () {
        $(".js_gdfl").css("display", "none");
        $(this).prev().removeClass("js_span_fl");
    })
})

html部分核心代码：

 
                    <div class="js_inex_menu_div">
                        <span id="js_sp_0"><a href="#">精品婚纱 &gt;</a></span>
                        <div class="js_gdfl">
                            <ul class="tc_menu">
                                <li class="tczl">款 式：</li><li class="kslx"><a href="#">抹胸型</a><a href="#">一字肩</a><a
                                    href="#">吊带型</a><a href="#">挂脖型</a><a href="#">深V领</a><a href="#">冬季婚纱</a> <a href="#">
                                        孕妇婚纱</a></span></li>
                            </ul>
                            <ul class="tc_menu bj">
                                <li class="tczl">裙 摆：</li><li class="kslx"><a href="#">抹胸型</a><a href="#">一字肩</a><a
                                    href="#">吊带型</a><a href="#">挂脖型</a><a href="#">深V领</a><a href="#">冬季婚纱</a> <a href="#">
                                        孕妇婚纱</a></span></li>
                            </ul>
                        </div>
                    </div>