首页 > 代码库 > html5实现银联海购商品分类列表
html5实现银联海购商品分类列表
银联海购官网请点击 http://haigou.unionpay.com/
1.实现效果预览展示如下：
2.源码如下
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>银联海购</title> 6 <link rel="stylesheet" type="text/css" href="css/main.css"> 7 </head> 8 <body> 9 <div class="nav-bar"> 10 <div class="nav-content"> 11 <div class="all-product-kinds"> 12 <p>全部商品分类</p> 13 <ul class="silder-kinds" id="nav-tab" style="display: none;"> 14 <li class="clearfix active"> 15 <dl class="main"> 16 <dt><a href="#none">母婴用品</a></dt> 17 <dd><a href="#none">奶粉</a></dd> 18 <dd><a href="#none">米粉</a></dd> 19 <dd><a href="#none">玩具</a></dd> 20 <dd><a href="#none">润肤用品</a></dd> 21 <dd><a href="#none">婴儿车</a></dd> 22 </dl> 23 <div class="silder-kinds-detail" style="display: block;"> 24 <dl> 25 <dt><a href="#none">奶粉辅食</a></dt> 26 <dd><a href="#none">营养剂</a></dd> 27 <dd><a href="#none">奶粉</a></dd> 28 <dd><a href="#none">米粉</a></dd> 29 </dl> 30 <dl> 31 <dt><a href="#none">洗护/喂哺</a></dt> 32 <dd><a href="#none">保健/安全</a></dd> 33 <dd><a href="#none">哺乳用品</a></dd> 34 <dd><a href="#none">沐浴，润肤用品</a></dd> 35 <dd><a href="#none">止尿裤</a></dd> 36 </dl> 37 <dl> 38 <dt><a href="#none">孕妇产品</a></dt> 39 <dd><a href="#none">孕妇营养用品</a></dd> 40 <dd><a href="#none">妊娠纹护理</a></dd> 41 </dl> 42 <dl> 43 <dt><a href="#none">童装</a></dt> 44 <dd><a href="#none">童鞋</a></dd> 45 <dd><a href="#none">套装</a></dd> 46 <dd><a href="#none">裤子</a></dd> 47 <dd><a href="#none">T恤</a></dd> 48 <dd><a href="#none">裙子</a></dd> 49 <dd><a href="#none">普通外套</a></dd> 50 </dl> 51 <dl> 52 <dt><a href="#none">玩具</a></dt> 53 <dd><a href="#none">婴幼玩具</a></dd> 54 <dd><a href="#none">模型玩具</a></dd> 55 <dd><a href="#none">玩偶/手办</a></dd> 56 <dd><a href="#none">益智玩具</a></dd> 57 </dl> 58 <dl> 59 <dt><a href="#none">婴儿车/车垫</a></dt> 60 <dd><a href="#none">婴儿车/车垫</a></dd> 61 </dl> 62 </div> 63 </li> 64 <li class="clearfix"> 65 <dl class="main"> 66 <dt><a href="#none">美容护肤</a></dt> 67 <dd><a href="#none">唇膏</a></dd> 68 <dd><a href="#none">粉饼</a></dd> 69 <dd><a href="#none">香水</a></dd> 70 <dd><a href="#none">美容工具</a></dd> 71 <dd><a href="#none">身体护肤</a></dd> 72 <dd><a href="#none">洁面乳</a></dd> 73 </dl> 74 <div class="silder-kinds-detail" style="display: none;"> 75 <dl> 76 <dt><a href="#none">美容护肤</a></dt> 77 <dd><a href="#none">养颜</a></dd> 78 <dd><a href="#none">BB霜</a></dd> 79 </dl> 80 <dl> 81 <dt><a href="#none">护肤品</a></dt> 82 <dd><a href="#none">乳液/面霜</a></dd> 83 <dd><a href="#none">面膜</a></dd> 84 <dd><a href="#none">化妆水</a></dd> 85 <dd><a href="#none">套装</a></dd> 86 <dd><a href="#none">卸妆</a></dd> 87 <dd><a href="#none">精华素</a></dd> 88 <dd><a href="#none">男士护肤</a></dd> 89 <dd><a href="#none">防晒霜</a></dd> 90 <dd><a href="#none">眼霜</a></dd> 91 <dd><a href="#none">洁面乳</a></dd> 92 </dl> 93 <dl> 94 <dt><a href="#none">香水/身体护理</a></dt> 95 <dd><a href="#none">香水</a></dd> 96 <dd><a href="#none">身体护理</a></dd> 97 </dl> 98 <dl> 99 <dt><a href="#none">美容工具/美发护发</a></dt> 100 <dd><a href="#none">美容工具</a></dd> 101 <dd><a href="#none">美发护发</a></dd> 102 </dl> 103 </div> 104 </li> 105 <li class="clearfix"> 106 <dl class="main"> 107 <dt><a href="#none">服装箱包</a></dt> 108 <dd><a href="#none">女鞋</a></dd> 109 <dd><a href="#none">短裙</a></dd> 110 <dd><a href="#none">西服</a></dd> 111 <dd><a href="#none">T恤衬衫</a></dd> 112 <dd><a href="#none">男运动鞋</a></dd> 113 <dd><a href="#none">腕表珠宝</a></dd> 114 </dl> 115 <div class="silder-kinds-detail" style="display: none;"> 116 <dl> 117 <dt><a href="#none">服装箱包</a></dt> 118 <dd><a href="#none">唇膏</a></dd> 119 <dd><a href="#none">BB霜</a></dd> 120 <dd><a href="#none">粉饼</a></dd> 121 <dd><a href="#none">粉底/隔离</a></dd> 122 <dd><a href="#none">眼部</a></dd> 123 <dd><a href="#none">腮红</a></dd> 124 </dl> 125 <dl> 126 <dt><a href="#none">护肤品</a></dt> 127 <dd><a href="#none">乳液/面霜</a></dd> 128 <dd><a href="#none">面膜</a></dd> 129 <dd><a href="#none">化妆水</a></dd> 130 <dd><a href="#none">套装</a></dd> 131 <dd><a href="#none">卸妆</a></dd> 132 <dd><a href="#none">精华素</a></dd> 133 <dd><a href="#none">男士护肤</a></dd> 134 <dd><a href="#none">防晒霜</a></dd> 135 <dd><a href="#none">眼霜</a></dd> 136 <dd><a href="#none">洁面乳</a></dd> 137 </dl> 138 <dl> 139 <dt><a href="#none">香水/身体护理</a></dt> 140 <dd><a href="#none">香水</a></dd> 141 <dd><a href="#none">身体护理</a></dd> 142 </dl> 143 <dl> 144 <dt><a href="#none">美容工具/美发护发</a></dt> 145 <dd><a href="#none">美容工具</a></dd> 146 <dd><a href="#none">美发护发</a></dd> 147 </dl> 148 </div> 149 </li> 150 <li class="clearfix"> 151 <dl class="main"> 152 <dt><a href="#none">食品保健</a></dt> 153 <dd><a href="#none">咖啡</a></dd> 154 <dd><a href="#none">巧克力</a></dd> 155 <dd><a href="#none">放便面</a></dd> 156 <dd><a href="#none">零食特产</a></dd> 157 <dd><a href="#none">美容养颜</a></dd> 158 <dd><a href="#none">营养保健</a></dd> 159 </dl> 160 <div class="silder-kinds-detail" style="display: none;"> 161 <dl> 162 <dt><a href="#none">食品保健</a></dt> 163 <dd><a href="#none">唇膏</a></dd> 164 <dd><a href="#none">BB霜</a></dd> 165 </dl> 166 <dl> 167 <dt><a href="#none">护肤品</a></dt> 168 <dd><a href="#none">乳液/面霜</a></dd> 169 <dd><a href="#none">面膜</a></dd> 170 <dd><a href="#none">化妆水</a></dd> 171 <dd><a href="#none">套装</a></dd> 172 </dl> 173 <dl> 174 <dt><a href="#none">香水/身体护理</a></dt> 175 <dd><a href="#none">香水</a></dd> 176 <dd><a href="#none">身体护理</a></dd> 177 </dl> 178 <dl> 179 <dt><a href="#none">美容工具/美发护发</a></dt> 180 <dd><a href="#none">美容工具</a></dd> 181 <dd><a href="#none">美发护发</a></dd> 182 </dl> 183 </div> 184 </li> 185 <li class="clearfix"> 186 <dl class="main"> 187 <dt><a href="#none">家具数码</a></dt> 188 <dd><a href="#none">日用</a></dd> 189 <dd><a href="#none">厨具</a></dd> 190 <dd><a href="#none">个护</a></dd> 191 <dd><a href="#none">生活家电</a></dd> 192 <dd><a href="#none">数码影音</a></dd> 193 <dd><a href="#none">厨房电器</a></dd> 194 </dl> 195 <div class="silder-kinds-detail" style="display: none;"> 196 <dl> 197 <dt><a href="#none">家具数码</a></dt> 198 <dd><a href="#none">唇膏</a></dd> 199 <dd><a href="#none">BB霜</a></dd> 200 <dd><a href="#none">粉饼</a></dd> 201 <dd><a href="#none">粉底/隔离</a></dd> 202 <dd><a href="#none">眼部</a></dd> 203 <dd><a href="#none">腮红</a></dd> 204 </dl> 205 <dl> 206 <dt><a href="#none">护肤品</a></dt> 207 <dd><a href="#none">乳液/面霜</a></dd> 208 <dd><a href="#none">面膜</a></dd> 209 <dd><a href="#none">化妆水</a></dd> 210 <dd><a href="#none">套装</a></dd> 211 <dd><a href="#none">卸妆</a></dd> 212 <dd><a href="#none">精华素</a></dd> 213 <dd><a href="#none">男士护肤</a></dd> 214 <dd><a href="#none">防晒霜</a></dd> 215 <dd><a href="#none">眼霜</a></dd> 216 <dd><a href="#none">洁面乳</a></dd> 217 </dl> 218 <dl> 219 <dt><a href="#none">香水/身体护理</a></dt> 220 <dd><a href="#none">香水</a></dd> 221 <dd><a href="#none">身体护理</a></dd> 222 </dl> 223 <dl> 224 <dt><a href="#none">美容工具/美发护发</a></dt> 225 <dd><a href="#none">美容工具</a></dd> 226 <dd><a href="#none">美发护发</a></dd> 227 </dl> 228 </div> 229 </li> 230 </ul> 231 </div> 232 <ul class="main-nav" > 233 <li><a href="#none">首页</a></li> 234 <li><a href="#none">海外直邮</a></li> 235 <li class="parent global-btn"> 236 <a href="#none">全球馆</a> 237 <ul class="level-2"> 238 <li><a href="#none">美国馆</a></li> 239 <li><a href="#none">欧洲馆</a></li> 240 <li><a href="#none">日本馆</a></li> 241 <li><a href="#none">韩国馆</a></li> 242 <li><a href="#none">大洋馆</a></li> 243 </ul> 244 </li> 245 <li><a href="#none">折扣专区</a></li> 246 <li><a href="#none">出境优惠</a></li> 247 <li><a href="#none">教育缴费</a></li> 248 <li><a href="#none">全球商户</a></li> 249 </ul> 250 </div> 251 </div> 252 <!--引入jQuery库--> 253 <script type="text/javascript" src="js/lib/jquery-3.1.1.min.js" ></script> 254 <!--作者：zhangjiangfeng 时间：2016-11-10 描述：选项卡内容切换--> 255 <script type="text/javascript" src="js/unionpay.js"></script> 256 </body> 257 </html>
1 @charset "utf-8"; 2 /* CSS Document */ 3 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 4 margin: 0; 5 padding: 0; 6 border: 0; 7 list-style: none; 8 font: inherit; 9 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 10 } 11 body { 12 width: 100%; 13 height:100%; 14 font-size: 16px; 15 color:#333; 16 font-family: "Microsoft YaHei"; 17 -webkit-font-smoothing: antialiased; 18 } 19 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 20 display: block; 21 } 22 table { 23 border-collapse: collapse; 24 border-spacing: 0; 25 } 26 input, textarea { 27 border: 0; 28 } 29 /*去除a标签的虚线框*/ 30 a { 31 blr:expression(this.onFocus=this.blur()); 32 outline: none; 33 text-decoration:none; 34 } 35 .fr { 36 float: right; 37 } 38 .fl { 39 float: left; 40 } 41 .clearfix:after { 42 visibility: hidden; 43 display: block; 44 font-size: 0; 45 content: "."; 46 clear: both; 47 height: 0; 48 } 49 * html .clearfix { 50 zoom: 1; 51 } 52 *:first-child + html .clearfix { 53 zoom: 1; 54 } 55 56 ::-webkit-input-placeholder { 57 color: #999; 58 } 59 :-moz-placeholder {/* Firefox 18- */ 60 color: #999; 61 } 62 ::-moz-placeholder{/* Firefox 19+ */ 63 color: #999; 64 } 65 :-ms-input-placeholder { 66 color: #999; 67 } 68 69 html { 70 width: 100%; 71 height:100%; 72 font-size: 16px; 73 } 74 75 .nav-bar { 76 height: 40px; 77 min-width: 1190px; 78 width: 100%; 79 background-color: #3A3A3A; 80 color: #fff; 81 } 82 /*-----导航内容居中实现样式------*/ 83 .nav-content { 84 width: 1190px; 85 height: 40px; 86 margin: 0 auto; 87 } 88 /*--------全部商品分类样式-------*/ 89 .all-product-kinds { 90 width: 220px; 91 height: 100%; 92 background-color: #19A6A6; 93 position: relative; 94 float: left; 95 } 96 ul.silder-kinds { 97 border-right: solid 1px #19A6A6; 98 } 99 .all-product-kinds .silder-kinds li:hover { 100 background-color: #19A6A6; 101 } 102 .all-product-kinds .silder-kinds li:hover dl.main a { 103 color: #FFFFFF; 104 } 105 .all-product-kinds .silder-kinds dl.main a:hover { 106 text-decoration: underline; 107 } 108 109 /*添加选中样式*/ 110 .all-product-kinds .silder-kinds li.active { 111 background-color: #19A6A6; 112 } 113 .all-product-kinds .silder-kinds li.active dl.main a { 114 color: #FFFFFF; 115 } 116 117 118 .all-product-kinds p { 119 padding-left: 20px; 120 line-height: 40px; 121 cursor: pointer; 122 } 123 .all-product-kinds ul { 124 list-style: none; 125 position: absolute; 126 left: 0; 127 top: 40px; 128 padding-top: 20px; 129 width: 220px; 130 min-height: 417px; 131 font-size: 12px; 132 background-color:#FFFFFF; 133 } 134 ul.silder-kinds dl.main dd { 135 float: left; 136 width: 65px; 137 margin-top: 6px; 138 } 139 ul.silder-kinds dl.main dt a { 140 color: #333; 141 font-weight: 700; 142 } 143 ul.silder-kinds dl.main dd a { 144 color: #666666; 145 } 146 ul.silder-kinds li { 147 padding-left: 20px; 148 padding-bottom: 10px; 149 } 150 151 .silder-kinds-detail { 152 width: 780px; 153 height: 417px; 154 position: absolute; 155 left:220px; 156 top: 0; 157 padding-top: 20px; 158 background-color: #FFFFFF; 159 border-color: #19A6A6; 160 border-style: solid; 161 border-width: 0 1px 1px; 162 } 163 .silder-kinds-detail dl { 164 width: 335px; 165 margin: 28px 0 0 39px; 166 float: left; 167 } 168 .silder-kinds-detail dt { 169 padding-bottom: 10px; 170 border-bottom: 1px solid #D4D4D4; 171 } 172 .silder-kinds-detail dl dt a { 173 font-weight: bolder; 174 color: #333; 175 font-size: 14px; 176 } 177 .silder-kinds-detail dl dd a { 178 color: #666; 179 } 180 181 .silder-kinds-detail dl dd a:hover { 182 color: #19A6A6; 183 text-decoration: underline; 184 } 185 .silder-kinds-detail dl dd { 186 float: left; 187 margin: 10px 22px 0 0; 188 } 189 190 191 .nav-bar ul.main-nav { 192 list-style: none; 193 outline: 0; 194 float: left; 195 } 196 .nav-bar ul.main-nav li { 197 display: inline-block; 198 line-height: 40px; 199 } 200 .nav-bar ul.main-nav li.parent { 201 position:relative; 202 } 203 .nav-bar ul.main-nav li a { 204 text-decoration: none; 205 color: #FFFFFF; 206 display: block; 207 padding: 0 20px; 208 } 209 .nav-bar ul.main-nav li a:hover { 210 background-color: rgba(255,255,255,.2); 211 } 212 213 /*下拉菜单*/ 214 .level-2 { 215 position: absolute; 216 left: 0; 217 top: 40px; 218 background-color: #3a3a3a; 219 } 220 .level-2>li>a { 221 display: block; 222 padding: 0 20px; 223 text-decoration: none; 224 color: #fff; 225 } 226 .level-2>li>a { 227 color: #19A6A6; 228 } 229 .level-2 { 230 display: none; 231 } 232 ul.main-nav>li.global-btn:hover .level-2 { 233 display: block; 234 } 235 .nav-bar ul.main-nav li>ul.level-2>li>a:hover { 236 background-color: #19a6a6; 237 color: #FFFFFF; 238 } 239 240 241
1 /** 2 * 商品分类列表展示 3 * Author zhangjiangfeng 4 * Date 2016/11/12 5 */ 6 $(function(){ 7 var $navTab = $("#nav-tab"); //选项卡 8 var $navTabDetail = $navTab.find(".silder-kinds-detail"); 9 var $leftNavTab = $(".all-product-kinds p"); 10 var time = null; 11 //选项卡内容之间切换 12 /*$navTab.on("click","li", function(){ 13 var $that = $(this); 14 $that.addClass("active").siblings().removeClass("active"); 15 $navTabDetail.each(function(i){ 16 var $_that = $(this); 17 $_that.hide(); 18 }); 19 $that.find(".silder-kinds-detail").show(); 20 })*/ 21 22 $navTab.children("li").hover(function(){ 23 //清除定时器 24 clearInterval(time); 25 var $that = $(this); 26 $that.addClass("active").siblings().removeClass("active"); 27 $navTabDetail.each(function(i){ 28 var $_that = $(this); 29 $_that.hide(); 30 }); 31 //商品分类详情 32 $that.find(".silder-kinds-detail").show(); 33 },function(){ 34 //商品分类详情 35 time = setInterval(function(){ 36 $navTab.hide(); 37 },3000); 38 }) 39 40 $leftNavTab.hover(function(){ 41 $navTab.show(); 42 }); 43 })
html5实现银联海购商品分类列表
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。