左側分類導航菜單，是電商購物導航的最直接的分類形式。
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"，默認隱藏。
默認效果如下：