左侧分类导航菜单（续）

最新推荐文章于 2024-07-30 10:27:19 发布

weixin_30677073

最新推荐文章于 2024-07-30 10:27:19 发布

阅读量86

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/kuikui/p/3237190.html

版权

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

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="http://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>

运行代码

默认效果如下：

运行代码

转载于:https://www.cnblogs.com/kuikui/p/3237190.html

weixin_30677073

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
左侧分类导航菜单（续）

左侧分类导航菜单，是电商购物导航的最直接的分类形式。js方面主要以下几点注意1、事件有mouseover、mouseleaveonmouseover 事件会在鼠标指针移动到指定的对象上时发生。onmouseleave 事件会在鼠标指针移出到指定的对象时发生。2、setTimeout、clearTimeoutsetTimeout 方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout()...
复制链接

扫一扫