仿淘宝商城左侧分类导航菜单效果（平滑，高效，智能定位，jquery版）

仿淘宝商城   左侧分类导航菜单  效果（平滑，高效，智能定位，jquery版）

 

jquery实现：

$(document).ready(function () {

     <!-- 鼠标进入-->

    var g = $(".pop-subcategory");

    $('.items').delegate("li", "mouseenter", function () {

        $(".shadow").children().addClass("hidden");

        var i = $("li").index(this);

        var s = $(".shadow").children().eq(i);

        s.removeClass("hidden");

        $(this).addClass("selected");

        $(".mallCategory").css("zIndex", 20);

        g.removeClass("hidden");

        <!--智能定位-->

        var e = $(this);

        var z = 20,

            u = 0;

        var C = e.offset(),

            y = e.height(),

            v = $(".mallCategory").offset(),

            t = $(".pop-subcategory").height(),

            w = $(window).height(),

            q = $(window).scrollTop(),

            r = w - t - (C.top - q),

            x = Math.abs(C.top - q - v.top),

            B = w - (C.top - q),

            p = C.top - v.top;

        if (r <= 0) {

            r = Math.abs(r);

            if (B > y) {

                u = B - y;

                if (u > z) {

                    p = p - r - z + 7;

                } else {

                    p = p - r;

                }

            } else {

                p = p - r + z + B + 20;

            }

        }

        if (p < 0) {

            p = 0;

        }

        $(".pop-subcategory").css("top", p + "px");

 $(".shadow").children().eq(i).find('.lst-subcategory dl:first').addClass("first");

        g.live("mouseenter", function () {

            $('.items').children().removeClass("selected");

            $('.items').children().eq(i).addClass("selected");

            g.removeClass("hidden");

        });

    });

   <!-- 鼠标移出后-->

    $('.pop-subcategory').delegate("div.J_SubViewItem", "mouseleave", function () {

        $(this).addClass("hidden");

        g.addClass("hidden");

        $('.items').children().removeClass("selected");

        $(".mallCategory").css("zIndex", 15);

    });



    $('.items').delegate("li.J_MenuItem", "mouseleave", function () {

        $(this).removeClass("selected");

        g.addClass("hidden");

        $(".mallCategory").css("zIndex", 15);

    });

});

完毕！