左侧分类导航菜单（续）
左侧分类导航菜单，是电商购物导航的最直接的分类形式。
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"，默认隐藏。
默认效果如下：