效果图
直接放代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cat</title> <link rel="stylesheet" href="../css/base.css"> <link rel="stylesheet" href="../css/cat.css"> </head> <body> <div class="content"> <div class="container"> <div id="cat" class="cat"> <a href="#" class="cat-title"><i class="cart-icon">#</i>商品分类</a> <div class="cat-item dropdown" data-active="cat" data-load="../js/cat-1.json"> <div class="dropdown-toggle"> <a href="#" class="cat-item-link">家用电器</a> <span class="dropdown-arrow cat-arrow">></span> </div> <div class="dropdown-list"> <div class="dropdown-loading"></div> </div> </div> <div class="cat-item dropdown" data-active="cat" data-load="../js/cat-2.json"> <div class="dropdown-toggle"> <a href="#" class="cat-item-link">手机、运营商、数码</a> <span class="dropdown-arrow cat-arrow">></span> </div> <div class="dropdown-list"> <div class="dropdown-loading"></div> </div> </div> <div class="cat-item dropdown" data-active="cat" data-load="../js/cat-3.json"> <div class="dropdown-toggle"> <a href="#" class="cat-item-link">电脑、办公</a> <span class="dropdown-arrow cat-arrow">></span> </div> <div class="dropdown-list"> <div class="dropdown-loading"></div> </div> </div> <div class="cat-item dropdown" data-active="cat" data-load="../js/cat-4.json"> <div class="dropdown-toggle"> <a href="#" class="cat-item-link">家居、家具、家装、厨具</a> <span class="dropdown-arrow cat-arrow">></span> </div> <div class="dropdown-list"> <div class="dropdown-loading"></div> </div> </div> </div> </div> </div> <script src="../js/jquery.js"></script> <script src="../js/transition.js"></script> <script src="../js/showhide.js"></script> <script src="../js/dropdown.js"></script> <script src="../js/cat.js"></script> </body> </html>
base.css https://www.cnblogs.com/chenyingying0/p/12363689.html
cat.css
/*公共样式 */ .container{ width:1200px; margin:0 auto; } .link{ color:#4d555d; } a.link:hover{ color:#f01414; } .fl{ float:left; } .fr{ float:right; } /*提取出过渡样式，可公用*/ .transition{ -webkit-transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s; transition:all .5s; } /*文字隐藏*/ .text-hidden{ text-indent:-9999px; overflow:hidden; } /*文字溢出省略显示*/ .text-ellipsis{ overflow: hidden; white-space: nowrap; text-overflow:ellipsis; } /*dropdown下拉组件*/ .dropdown{ position: relative; } .dropdown-toggle{ position: relative; z-index:4; } .dropdown-arrow{ display: inline-block; vertical-align: middle; background-repeat: no-repeat; line-height:1;/*否则图标字体会继承父元素的line-height属性，占据过多空间*/ } .dropdown-list{ display: none; position: absolute; z-index:3; } .dropdown-left{ left:0; right:auto; } .dropdown-right{ right:0; left:auto; } .dropdown-loading{ width:32px; height:32px; background:url(../img/loading.gif) no-repeat; margin:20px; } /*showhide*/ .fadeOut{ opacity: 0; visibility: hidden; } .slideUpDownCollapse{ height:0 !important;/*避免因为优先级不够而无法生效*/ padding-top:0 !important; padding-bottom:0 !important; } .slideLeftRightCollapse{ width:0 !important;/*避免因为优先级不够而无法生效*/ padding-left:0 !important; padding-right:0 !important; } /*侧导航*/ .cat{ width:209px; height:566px; background-color:#f01414; position: absolute; top: -54px; z-index: 5; } .cat-title{ display: inline-block; width:165px; height:54px; line-height:54px; color:#fff; font-size:14px; padding:0 22px; background-color:#c81414; } .cart-icon{ color:#fff; font-style:normal; font-size:18px; margin-right:8px; } .cat-item{ height:37px; line-height: 37px; padding-left:18px; color:#fff; border-left:1px solid #f01414; border-right:1px solid #f01414; position: static;/*覆盖掉之前的relative定位，使右边list相对于整个大容器进行顶部对齐*/ } .cat-arrow{ position: absolute; right: 20px; top: 9px; } .cat-item-link{ color:#fff; } .cat .dropdown-loading{ margin:220px auto 0; } .cat .dropdown-list{ position: absolute; left:209px; top:54px; background:#fff; width:500px; box-shadow:0 0 5px rgba(0,0,0,.2); padding:20px; height:472px; overflow:hidden; } .dropdown-list-item{ width:500px !important; display: block; margin:24px 0; line-height:20px; } .dropdown-list-item-title{ display: block; float:left; width:84px; padding-right:16px; border-right:1px solid #333; text-align:right; font-weight:bold; } .dropdown-list-item-txt{ display: inline-block; padding-left:15px; width:380px; } .dropdown-list-item-txt a{ margin-right:16px; display: inline-block;/*否则内联元素换行时文字会被拆开*/ } /*激活样式*/ .cat-active.cat-item{ background-color:#fff; color:#f01414; } .cat-active .cat-item-link{ color:#f01414; } .cat-active .dropdown-list{ display:block; }
jquery.js
transition.js https://www.cnblogs.com/chenyingying0/p/12363649.html
showhide.js https://www.cnblogs.com/chenyingying0/p/12363707.html
dropdown.js https://www.cnblogs.com/chenyingying0/p/12363739.html
cat.js
// 不要暴露在全局，使用匿名函数自执行 (function($){ "use strict"; //cat $("#cat").find(".dropdown").on("dropdown-show",function(e){ loadOnce($(this),buildCatItem); }).dropdown({ css3:true, js:true, animation:"slideLeftRight" }); //创建cat的item结构 function buildCatItem($elem,data){ var list=$elem.find(".dropdown-list"); var html=""; if(data.length===0) return; html=``; for(var i=0;i<data.length;i++){ html+=`<dl class="dropdown-list-item"> <dt class="dropdown-list-item-title"> <a href="#">`+data[i].title+`</a> </dt> <dd class="dropdown-list-item-txt">`; for(var j=0;j<data[i].items.length;j++){ html+=`<a href="#">`+data[i].items[j]+`</a>`; } html+=`</dd></dl>`; } list.html(html); } //加载一次数据 function loadOnce($elem,success){ var dataLoad=$elem.data("load"); if(!dataLoad) return; if(!$elem.data("loaded")){ $elem.data("loaded",true); $.getJSON(dataLoad).done(function(data){ success($elem,data); }).fail(function(){ $elem.data("loaded",false); }); } } })(jQuery);