商品导航菜单

随笔- 40  文章- 0  评论- 103 

jQuery/CSS3类似阿里巴巴的商品导航菜单实现教程

 

有两天没发表文章了，今天来说说利用jQuery和CSS3制作一款类似阿里巴巴左侧商品菜单导航，这款菜单看起来非常大气，可以展示非常多的产品类目，如果你在设计电子商务网站，不妨可以拿来参考，一下是效果图：

我们也可以到这里来查看这款菜单的DEMO演示。

接下来还是分析一下源代码，源码由HTML、CSS和jQuery组成，先来看看HTML，东西很多，但结构非常简单：

 

代码太长了，折叠了一下，有兴趣可以展开来看。

然后是CSS代码：

 

其中，利用border-radius实现了圆角，利用box-shadow实现了边框阴影。

由于没有绚丽的外观，所以CSS代码也并不复杂，都是一些普通的CSS代码。

最主要的代码就是jQuery了，它实现了子菜单的展开与收起，起着控制的作用。

(function(a) {
    a.fn.hoverDelay = function(c, f, g, b) {
        var g = g || 200,
        b = b || 200,
        f = f || c;
        var e = [],
        d = [];
        return this.each(function(h) {
            a(this).mouseenter(function() {
                var i = this;
                clearTimeout(d[h]);
                e[h] = setTimeout(function() {
                    c.apply(i)
                },
                g)
            }).mouseleave(function() {
                var i = this;
                clearTimeout(e[h]);
                d[h] = setTimeout(function() {
                    f.apply(i)
                },
                b)
            })
        })
    }
})(jQuery);
$(function() {
$(".sidebar").hoverDelay(function() {
        $("#sidebar_box").show();
        $(".sidebar_top s").addClass("s_down");
    },
    function() {
        $("#sidebar_box").hide();
        $(".sidebar_top s").removeClass("s_down");
    });
    $(".sidebar_item dd").hoverDelay(function() {
        $(this).find("h3").addClass("sidebar_focus");
        $(this).find(".sidebar_popup").show(0);
    },
    function() {
        $(this).find("h3").removeClass("sidebar_focus");
        $(this).find(".sidebar_popup").hide(0);
    });
});

这里主要用jQuery控制了鼠标滑过菜单项时的延迟处理，这样你滑杆菜单项要停顿一下子菜单才能展开，鼠标移开是也要停顿一下子菜单才能收起，这样避免重复性的菜单展开折叠，影响用户体验。

处理延时功能主要是hoverDelay发放，其实实现也是比较简单的。

最后，把源代码分享一下，下载地址>>