左侧分类导航菜单（续）

爱被打了一巴掌 2022-03-27 01:47 278阅读 0赞

左侧分类导航菜单，是电商购物导航的最直接的分类形式。  
  
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>

运行代码

默认效果如下：

运行代码