左侧分类导航菜单（续）

左侧分类导航菜单，是电商购物导航的最直接的分类形式。

js方面主要以下几点注意
1、事件有mouseover、mouseleave
onmouseover 事件会在鼠标指针移动到指定的对象上时发生。
onmouseleave 事件会在鼠标指针移出到指定的对象时发生。
2、setTimeout、clearTimeout
setTimeout 方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout() 只执行 code 一次。
clearTimeout 方法可取消由 setTimeout() 方法设置的 timeout。

代码片段：
鼠标移动到li元素上和移出元素时执行的动作

_this.showlist.find(".item").live("mouseover",function(){
    var $this = $(this), show = _this.showlist.find(".show"), len = show.length;
    
    if(!!stopOver){
        clearTimeout(stopOver);
    }
    if(!!stopLeave){
        clearTimeout(stopLeave);
    }
    stopOver =  setTimeout(function(){
        _this.showlist.find(".show,.tri").hide();
        _this.showlist.find(".tit").removeClass("on");

        var index = $this.index(),tmpheight = $this.find(".show").height(),topval = 0;

        if(index < 5){
            topval = index * (-41);
            show.css({"top": topval + "px"});
        } else if(index > ( len - 5)) {
            topval = -tmpheight + (len - 1 -index) * 41 + 20;
            show.css({"top": topval + "px"});
        } else{
            var tmpheight = $this.find(".show").height();
            topval = -tmpheight/2 + 10;
            show.css({"top": topval + "px"});
        }
        
        $this.find(".show,.tri").show();
        $this.find(".tit").addClass("on");
    },_this.params.delay);
});

_this.showlist.find(".item").live("mouseleave",function(){
    var $this = $(this);
    stopLeave = setTimeout(function(){
        $this.find(".show,.tri").hide();
        $this.find(".tit").removeClass("on");
    },_this.params.delay);
});

 


css方面主要一下几点注意
1、position: relative 和 position的使用
2、清楚浮动
3、hover伪类的使用


代码演示：

如果设置显示将"navSwitch": "navopen"，默认隐藏。

默认效果如下：

posted @ 2013-08-04 22:07  前端咖  阅读(4672)  评论(4)    收藏  举报