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

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"，默认隐藏。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{ margin: 0px; padding: 0px; list-style: none; color: #333; }
body{ padding-top: 20px; height: 1000px; }
.cfl{*zoom:1;}
.cfl:after{content:"\0020";display:block;height:0;clear:both;overflow:hidden;visibility:hidden;}
.nav{ position: relative; width: 960px; margin: 0px auto; }
.navswitch{ width: 230px; height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; }
.navswitch a{ position: relative; display: block; height: 100%; font-weight: 700; text-decoration: none; padding-left: 30px; background: #f1f1f1; }
.navswitch a .tri{ position: absolute; right: 20px; top: 22px; z-index: 1; display: block; width: 0px; height: 0px; line-height: 0px; font-size: 0px; border: 8px solid #ffffff; border-color: #ffffff transparent transparent transparent; border-style: solid dashed dashed dashed; display: none; }
.navlist{ position: absolute; left: 0px; top: 51px; width: 230px; height: 650px; background: #f1f1f1; display: none; }
.navlist .item{ position: relative; height: 40px; border-bottom: 1px solid #ccc; }
.navlist .item .tit{ display: block; line-height: 40px; font-size: 16px; text-decoration: none; background: #f1f1f1; padding-left: 30px; }
.navlist .item .tit:hover{ background: #ccc; }
.navlist .item .on{ background: #ccc; }
.navlist .item .tri{ position: absolute; right: -1px; top: 10px; z-index: 2; display: block; width: 0px; height: 0px; line-height: 0px; font-size: 0px; border: 10px solid #f3f3f3; border-color:transparent #f3f3f3 transparent transparent; border-style: dashed solid dashed dashed; display: none; }
.navlist .item .tri i{ position: absolute; left: -4px; top: -8px; display: block; width: 0px; height: 0px; line-height: 0px; font-size: 0px; border: 8px solid #ffffff; border-color:transparent #ffffff transparent transparent; border-style: dashed solid dashed dashed; }
.navlist .item .show{ position: absolute; left: 230px; top: 0px; z-index: 1; width: 535px; border: 3px solid rgba(0,0,0,0.05); padding: 10px 0px 10px 0px; }
.navlist .item .show .lt{ float: left; width: 225px; font-size: 12px; line-height: 20px; }
.navlist .item .show .lt a{ text-decoration: none; }
.navlist .item .show .lt a:hover{ text-decoration: underline; }
.navlist .item .show .lt dl{ padding-left: 16px; margin-bottom: 10px; }
.navlist .item .show .lt dt{ font-weight: 700; font-size: 14px; line-height: 30px; }
.navlist .item .show .rt{ float: right; width: 300px; margin-right: 10px; }
</style>
</head>
<body>
<div class="nav">
<div class="navswitch"><a href="#">商品列表<label class="tri"></label></a></div>
<ul id="showlist" class="navlist">
<li class="item">
<a class="tit" href="#">商品名称1</a>
<label class="tri" ><i></i></label>
<div class="show cfl" style="display:none;">
<div class="lt">
<dl>
<dt><a href="#">全部分类1</a></dt>
<dd><a href="#">商品一</a></dd>
<dd><a href="#">商品二</a></dd>
<dd><a href="#">商品三</a></dd>
</dl>
<dl>
<dt>热门商品1</dt>
<dd><a href="#">热门商品一</a></dd>
<dd><a href="#">热门商品二</a></dd>
</dl>
</div>
<div class="rt">
<a href="#">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg">
</a>
</div>
</div>
</li>

<li class="item">
<a class="tit" href="#">商品名称2</a>
<label class="tri" ><i></i></label>
<div class="show cfl" style="display:none;">
<div class="lt">
<dl>
<dt><a href="#">全部分类2</a></dt>
<dd><a href="#">商品一</a></dd>
<dd><a href="#">商品二</a></dd>
<dd><a href="#">商品三</a></dd>
</dl>
<dl>
<dt>热门商品2</dt>
<dd><a href="#">热门商品一</a></dd>
<dd><a href="#">热门商品二</a></dd>
</dl>
</div>
<div class="rt">
<a href="#">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg">
</a>
</div>
</div>
</li>

<li class="item">
<a class="tit" href="#">商品名称3</a>
<label class="tri" ><i></i></label>
<div class="show cfl" style="display:none;">
<div class="lt">
<dl>
<dt><a href="#">全部分类3</a></dt>
<dd><a href="#">商品一</a></dd>
<dd><a href="#">商品二</a></dd>
<dd><a href="#">商品三</a></dd>
</dl>
<dl>
<dt>热门商品3</dt>
<dd><a href="#">热门商品一</a></dd>
<dd><a href="#">热门商品二</a></dd>
</dl>
</div>
<div class="rt">
<a href="#">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg">
</a>
</div>
</div>
</li>

<li class="item">
<a class="tit" href="#">商品名称4</a>
<label class="tri" ><i></i></label>
<div class="show cfl" style="display:none;">
<div class="lt">
<dl>
<dt><a href="#">全部分类4</a></dt>
<dd><a href="#">商品一</a></dd>
<dd><a href="#">商品二</a></dd>
<dd><a href="#">商品三</a></dd>
</dl>
<dl>
<dt>热门商品4</dt>
<dd><a href="#">热门商品一</a></dd>
<dd><a href="#">热门商品二</a></dd>
</dl>
</div>
<div class="rt">
<a href="#">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg">
</a>
</div>
</div>
</li>

<li class="item">
<a class="tit" href="#">商品名称5</a>
<label class="tri" ><i></i></label>
<div class="show cfl" style="display:none;">
<div class="lt">
<dl>
<dt><a href="#">全部分类5</a></dt>
<dd><a href="#">商品一</a></dd>
<dd><a href="#">商品二</a></dd>
<dd><a href="#">商品三</a></dd>
</dl>
<dl>
<dt>热门商品5</dt>
<dd><a href="#">热门商品一</a></dd>
<dd><a href="#">热门商品二</a></dd>
</dl>
</div>
<div class="rt">
<a href="#">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg">
</a>
</div>
</div>
</li>

<li class="item">
<a class="tit" href="#">商品名称6</a>
<label class="tri" ><i></i></label>
<div class="show cfl" style="display:none;">
<div class="lt">
<dl>
<dt><a href="#">全部分类6</a></dt>
<dd><a href="#">商品一</a></dd>
<dd><a href="#">商品二</a></dd>
<dd><a href="#">商品三</a></dd>
</dl>
<dl>
<dt>热门商品6</dt>
<dd><a href="#">热门商品一</a></dd>
<dd><a href="#">热门商品二</a></dd>
</dl>
</div>
<div class="rt">
<a href="#">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg">
</a>
</div>
</div>
</li>

<li class="item">
<a class="tit" href="#">商品名称7</a>
<label class="tri" ><i></i></label>
<div class="show cfl" style="display:none;">
<div class="lt">
<dl>
<dt><a href="#">全部分类7</a></dt>
<dd><a href="#">商品一</a></dd>
<dd><a href="#">商品二</a></dd>
<dd><a href="#">商品三</a></dd>
</dl>
<dl>
<dt>热门商品7</dt>
<dd><a href="#">热门商品一</a></dd>
<dd><a href="#">热门商品二</a></dd>
</dl>
</div>
<div class="rt">
<a href="#">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg">
</a>
</div>
</div>
</li>

<li class="item">
<a class="tit" href="#">商品名称8</a>
<label class="tri" ><i></i></label>
<div class="show cfl" style="display:none;">
<div class="lt">
<dl>
<dt><a href="#">全部分类8</a></dt>
<dd><a href="#">商品一</a></dd>
<dd><a href="#">商品二</a></dd>
<dd><a href="#">商品三</a></dd>
</dl>
<dl>
<dt>热门商品8</dt>
<dd><a href="#">热门商品一</a></dd>
<dd><a href="#">热门商品二</a></dd>
</dl>
</div>
<div class="rt">
<a href="#">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg">
</a>
</div>
</div>
</li>

<li class="item">
<a class="tit" href="#">商品名称9</a>
<label class="tri" ><i></i></label>
<div class="show cfl" style="display:none;">
<div class="lt">
<dl>
<dt><a href="#">全部分类9</a></dt>
<dd><a href="#">商品一</a></dd>
<dd><a href="#">商品二</a></dd>
<dd><a href="#">商品三</a></dd>
</dl>
<dl>
<dt>热门商品9</dt>
<dd><a href="#">热门商品一</a></dd>
<dd><a href="#">热门商品二</a></dd>
</dl>
</div>
<div class="rt">
<a href="#">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg">
</a>
</div>
</div>
</li>

<li class="item">
<a class="tit" href="#">商品名称10</a>
<label class="tri" ><i></i></label>
<div class="show cfl" style="display:none;">
<div class="lt">
<dl>
<dt><a href="#">全部分类10</a></dt>
<dd><a href="#">商品一</a></dd>
<dd><a href="#">商品二</a></dd>
<dd><a href="#">商品三</a></dd>
</dl>
<dl>
<dt>热门商品10</dt>
<dd><a href="#">热门商品一</a></dd>
<dd><a href="#">热门商品二</a></dd>
</dl>
</div>
<div class="rt">
<a href="#">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg">
</a>
</div>
</div>
</li>

<li class="item">
<a class="tit" href="#">商品名称11</a>
<label class="tri" ><i></i></label>
<div class="show cfl" style="display:none;">
<div class="lt">
<dl>
<dt><a href="#">全部分类11</a></dt>
<dd><a href="#">商品一</a></dd>
<dd><a href="#">商品二</a></dd>
<dd><a href="#">商品三</a></dd>
</dl>
<dl>
<dt>热门商品11</dt>
<dd><a href="#">热门商品一</a></dd>
<dd><a href="#">热门商品二</a></dd>
</dl>
</div>
<div class="rt">
<a href="#">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg">
</a>
</div>
</div>
</li>

<li class="item">
<a class="tit" href="#">商品名称12</a>
<label class="tri" ><i></i></label>
<div class="show cfl" style="display:none;">
<div class="lt">
<dl>
<dt><a href="#">全部分类12</a></dt>
<dd><a href="#">商品一</a></dd>
<dd><a href="#">商品二</a></dd>
<dd><a href="#">商品三</a></dd>
</dl>
<dl>
<dt>热门商品12</dt>
<dd><a href="#">热门商品一</a></dd>
<dd><a href="#">热门商品二</a></dd>
</dl>
</div>
<div class="rt">
<a href="#">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg">
</a>
</div>
</div>
</li>

<li class="item">
<a class="tit" href="#">商品名称13</a>
<label class="tri" ><i></i></label>
<div class="show cfl" style="display:none;">
<div class="lt">
<dl>
<dt><a href="#">全部分类13</a></dt>
<dd><a href="#">商品一</a></dd>
<dd><a href="#">商品二</a></dd>
<dd><a href="#">商品三</a></dd>
</dl>
<dl>
<dt>热门商品13</dt>
<dd><a href="#">热门商品一</a></dd>
<dd><a href="#">热门商品二</a></dd>
</dl>
</div>
<div class="rt">
<a href="#">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg">
</a>
</div>
</div>
</li>

<li class="item">
<a class="tit" href="#">商品名称14</a>
<label class="tri" ><i></i></label>
<div class="show cfl" style="display:none;">
<div class="lt">
<dl>
<dt><a href="#">全部分类8</a></dt>
<dd><a href="#">商品一</a></dd>
<dd><a href="#">商品二</a></dd>
<dd><a href="#">商品三</a></dd>
</dl>
<dl>
<dt>热门商品14</dt>
<dd><a href="#">热门商品一</a></dd>
<dd><a href="#">热门商品二</a></dd>
</dl>
</div>
<div class="rt">
<a href="#">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg">
</a>
</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="https://files.cnblogs.com/kuikui/jquery.js"></script>
<script>
var nav = {
init: function(params){
var _this = this;
this.params = $.extend({"delay": 200, "navSwitch": "navoff"},params);
this.showlist = $("#showlist");
this.navswitch = $(".navswitch");
this.isshowlist = false;
this.stopswitch = null;
this.stopswitchup = null;
_this.events();
},
events: function(){
var _this = this;
_this.domInitAction();
_this.navSwitchAction();
_this.liAction();
},
domInitAction: function(){
var _this = this;
if(_this.params.navSwitch === "navopen"){
_this.showlist.show();
_this.navswitch.find(".tri").hide();
} else {
_this.showlist.hide();
_this.navswitch.find(".tri").fadeIn();
}
},
navSwitchAction: function(){
var _this = this;
_this.navswitch.hover(function(){
if(_this.params.navSwitch !== "navopen"){
if(!!_this.stopswitch){
clearTimeout(_this.stopswitch);
}
if(!!_this.stopswitchup){
clearTimeout(_this.stopswitchup);
}
_this.showlist.fadeIn();
}
},function(){
if(_this.params.navSwitch !== "navopen"){
_this.stopswitch = setTimeout(function(){
_this.showlist.fadeOut();
},_this.params.delay);
}
});
},
liAction: function(){
var _this = this,stopOver = null,stopLeave = null;

_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);
});

_this.showlist.hover(function(){
if(_this.params.navSwitch !== "navopen"){
if(!!_this.stopswitch){
clearTimeout(_this.stopswitch);
}
}
},function(){
if(_this.params.navSwitch !== "navopen"){
_this.stopswitchup = setTimeout(function(){
_this.showlist.hide();
},_this.params.delay);
}
});
}
};

nav.init({"navSwitch": "navopen"});
</script>
</body>
</html>

默认效果如下：

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

nav.init();
</script>
</body>
</html>

分类: jquery

posted on 2013-08-05 15:03 HackerVirus 阅读(156) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

公告

导航

左侧分类导航菜单（续）