html5实现银联海购商品分类列表

1.实现效果预览展示如下：

2.源码如下

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>银联海购</title>

         <link rel="stylesheet" type="text/css" href="css/main.css">

     </head>

     <body>

         <div class="nav-bar">

             <div class="nav-content">

                 <div class="all-product-kinds">

                     <p>全部商品分类</p>

                     <ul class="silder-kinds" id="nav-tab" style="display: none;">

                         <li class="clearfix active">

                             <dl class="main">

                                 <dt><a href="#none">母婴用品</a></dt>

                                 <dd><a href="#none">奶粉</a></dd>

                                 <dd><a href="#none">米粉</a></dd>

                                 <dd><a href="#none">玩具</a></dd>

                                 <dd><a href="#none">润肤用品</a></dd>

                                 <dd><a href="#none">婴儿车</a></dd>

                             </dl>

                             <div class="silder-kinds-detail" style="display: block;">

                                 <dl>

                                     <dt><a href="#none">奶粉辅食</a></dt>

                                     <dd><a href="#none">营养剂</a></dd>

                                     <dd><a href="#none">奶粉</a></dd>

                                     <dd><a href="#none">米粉</a></dd>

                                 </dl>

                                 <dl>

                                     <dt><a href="#none">洗护/喂哺</a></dt>

                                     <dd><a href="#none">保健/安全</a></dd>

                                     <dd><a href="#none">哺乳用品</a></dd>

                                     <dd><a href="#none">沐浴，润肤用品</a></dd>

                                     <dd><a href="#none">止尿裤</a></dd>

                                 </dl>

                                 <dl>

                                     <dt><a href="#none">孕妇产品</a></dt>

                                     <dd><a href="#none">孕妇营养用品</a></dd>

                                     <dd><a href="#none">妊娠纹护理</a></dd>

                                 </dl>

                                 <dl>

                                     <dt><a href="#none">童装</a></dt>

                                     <dd><a href="#none">童鞋</a></dd>

                                     <dd><a href="#none">套装</a></dd>

                                     <dd><a href="#none">裤子</a></dd>

                                     <dd><a href="#none">T恤</a></dd>

                                     <dd><a href="#none">裙子</a></dd>

                                     <dd><a href="#none">普通外套</a></dd>

                                 </dl>

                                 <dl>

                                     <dt><a href="#none">玩具</a></dt>

                                     <dd><a href="#none">婴幼玩具</a></dd>

                                     <dd><a href="#none">模型玩具</a></dd>

                                     <dd><a href="#none">玩偶/手办</a></dd>

                                     <dd><a href="#none">益智玩具</a></dd>

                                 </dl>

                                 <dl>

                                     <dt><a href="#none">婴儿车/车垫</a></dt>

                                     <dd><a href="#none">婴儿车/车垫</a></dd>

                                 </dl>

                             </div>

                         </li>

                         <li class="clearfix">

                             <dl class="main">

                                 <dt><a href="#none">美容护肤</a></dt>

                                 <dd><a href="#none">唇膏</a></dd>

                                 <dd><a href="#none">粉饼</a></dd>

                                 <dd><a href="#none">香水</a></dd>

                                 <dd><a href="#none">美容工具</a></dd>

                                 <dd><a href="#none">身体护肤</a></dd>

                                 <dd><a href="#none">洁面乳</a></dd>

                             </dl>

                             <div class="silder-kinds-detail" style="display: none;">

                                 <dl>

                                     <dt><a href="#none">美容护肤</a></dt>

                                     <dd><a href="#none">养颜</a></dd>

                                     <dd><a href="#none">BB霜</a></dd>

                                 </dl>

                                 <dl>

                                     <dt><a href="#none">护肤品</a></dt>

                                     <dd><a href="#none">乳液/面霜</a></dd>

                                     <dd><a href="#none">面膜</a></dd>

                                     <dd><a href="#none">化妆水</a></dd>

                                     <dd><a href="#none">套装</a></dd>

                                     <dd><a href="#none">卸妆</a></dd>

                                     <dd><a href="#none">精华素</a></dd>

                                     <dd><a href="#none">男士护肤</a></dd>

                                     <dd><a href="#none">防晒霜</a></dd>

                                     <dd><a href="#none">眼霜</a></dd>

                                     <dd><a href="#none">洁面乳</a></dd>

                                 </dl>

                                 <dl>

                                     <dt><a href="#none">香水/身体护理</a></dt>

                                     <dd><a href="#none">香水</a></dd>

                                     <dd><a href="#none">身体护理</a></dd>

                                 </dl>

                                 <dl>

                                     <dt><a href="#none">美容工具/美发护发</a></dt>

                                     <dd><a href="#none">美容工具</a></dd>

                                     <dd><a href="#none">美发护发</a></dd>

                                 </dl>

                             </div>

                         </li>

                         <li class="clearfix">

                             <dl class="main">

                                 <dt><a href="#none">服装箱包</a></dt>

                                 <dd><a href="#none">女鞋</a></dd>

                                 <dd><a href="#none">短裙</a></dd>

                                 <dd><a href="#none">西服</a></dd>

                                 <dd><a href="#none">T恤衬衫</a></dd>

                                 <dd><a href="#none">男运动鞋</a></dd>

                                 <dd><a href="#none">腕表珠宝</a></dd>

                             </dl>

                             <div class="silder-kinds-detail" style="display: none;">

                                 <dl>

                                     <dt><a href="#none">服装箱包</a></dt>

                                     <dd><a href="#none">唇膏</a></dd>

                                     <dd><a href="#none">BB霜</a></dd>

                                     <dd><a href="#none">粉饼</a></dd>

                                     <dd><a href="#none">粉底/隔离</a></dd>

                                     <dd><a href="#none">眼部</a></dd>

                                     <dd><a href="#none">腮红</a></dd>

                                 </dl>

                                 <dl>

                                     <dt><a href="#none">护肤品</a></dt>

                                     <dd><a href="#none">乳液/面霜</a></dd>

                                     <dd><a href="#none">面膜</a></dd>

                                     <dd><a href="#none">化妆水</a></dd>

                                     <dd><a href="#none">套装</a></dd>

                                     <dd><a href="#none">卸妆</a></dd>

                                     <dd><a href="#none">精华素</a></dd>

                                     <dd><a href="#none">男士护肤</a></dd>

                                     <dd><a href="#none">防晒霜</a></dd>

                                     <dd><a href="#none">眼霜</a></dd>

                                     <dd><a href="#none">洁面乳</a></dd>

                                 </dl>

                                 <dl>

                                     <dt><a href="#none">香水/身体护理</a></dt>

                                     <dd><a href="#none">香水</a></dd>

                                     <dd><a href="#none">身体护理</a></dd>

                                 </dl>

                                 <dl>

                                     <dt><a href="#none">美容工具/美发护发</a></dt>

                                     <dd><a href="#none">美容工具</a></dd>

                                     <dd><a href="#none">美发护发</a></dd>

                                 </dl>

                             </div>

                         </li>

                         <li class="clearfix">

                             <dl class="main">

                                 <dt><a href="#none">食品保健</a></dt>

                                 <dd><a href="#none">咖啡</a></dd>

                                 <dd><a href="#none">巧克力</a></dd>

                                 <dd><a href="#none">放便面</a></dd>

                                 <dd><a href="#none">零食特产</a></dd>

                                 <dd><a href="#none">美容养颜</a></dd>

                                 <dd><a href="#none">营养保健</a></dd>

                             </dl>

                             <div class="silder-kinds-detail" style="display: none;">

                                 <dl>

                                     <dt><a href="#none">食品保健</a></dt>

                                     <dd><a href="#none">唇膏</a></dd>

                                     <dd><a href="#none">BB霜</a></dd>

                                 </dl>

                                 <dl>

                                     <dt><a href="#none">护肤品</a></dt>

                                     <dd><a href="#none">乳液/面霜</a></dd>

                                     <dd><a href="#none">面膜</a></dd>

                                     <dd><a href="#none">化妆水</a></dd>

                                     <dd><a href="#none">套装</a></dd>

                                 </dl>

                                 <dl>

                                     <dt><a href="#none">香水/身体护理</a></dt>

                                     <dd><a href="#none">香水</a></dd>

                                     <dd><a href="#none">身体护理</a></dd>

                                 </dl>

                                 <dl>

                                     <dt><a href="#none">美容工具/美发护发</a></dt>

                                     <dd><a href="#none">美容工具</a></dd>

                                     <dd><a href="#none">美发护发</a></dd>

                                 </dl>

                             </div>

                         </li>

                         <li class="clearfix">

                             <dl class="main">

                                 <dt><a href="#none">家具数码</a></dt>

                                 <dd><a href="#none">日用</a></dd>

                                 <dd><a href="#none">厨具</a></dd>

                                 <dd><a href="#none">个护</a></dd>

                                 <dd><a href="#none">生活家电</a></dd>

                                 <dd><a href="#none">数码影音</a></dd>

                                 <dd><a href="#none">厨房电器</a></dd>

                             </dl>

                         <div class="silder-kinds-detail" style="display: none;">

                                 <dl>

                                     <dt><a href="#none">家具数码</a></dt>

                                     <dd><a href="#none">唇膏</a></dd>

                                     <dd><a href="#none">BB霜</a></dd>

                                     <dd><a href="#none">粉饼</a></dd>

                                     <dd><a href="#none">粉底/隔离</a></dd>

                                     <dd><a href="#none">眼部</a></dd>

                                     <dd><a href="#none">腮红</a></dd>

                                 </dl>

                                 <dl>

                                     <dt><a href="#none">护肤品</a></dt>

                                     <dd><a href="#none">乳液/面霜</a></dd>

                                     <dd><a href="#none">面膜</a></dd>

                                     <dd><a href="#none">化妆水</a></dd>

                                     <dd><a href="#none">套装</a></dd>

                                     <dd><a href="#none">卸妆</a></dd>

                                     <dd><a href="#none">精华素</a></dd>

                                     <dd><a href="#none">男士护肤</a></dd>

                                     <dd><a href="#none">防晒霜</a></dd>

                                     <dd><a href="#none">眼霜</a></dd>

                                     <dd><a href="#none">洁面乳</a></dd>

                                 </dl>

                                 <dl>

                                     <dt><a href="#none">香水/身体护理</a></dt>

                                     <dd><a href="#none">香水</a></dd>

                                     <dd><a href="#none">身体护理</a></dd>

                                 </dl>

                                 <dl>

                                     <dt><a href="#none">美容工具/美发护发</a></dt>

                                     <dd><a href="#none">美容工具</a></dd>

                                     <dd><a href="#none">美发护发</a></dd>

                                 </dl>

                             </div>

                         </li>

                     </ul>

                 </div>

                 <ul class="main-nav" >

                     <li><a href="#none">首页</a></li>

                     <li><a href="#none">海外直邮</a></li>

                     <li class="parent global-btn">

                         <a href="#none">全球馆</a>

                         <ul class="level-2">

                             <li><a href="#none">美国馆</a></li>

                             <li><a href="#none">欧洲馆</a></li>

                             <li><a href="#none">日本馆</a></li>

                             <li><a href="#none">韩国馆</a></li>

                             <li><a href="#none">大洋馆</a></li>

                         </ul>

                     </li>

                     <li><a href="#none">折扣专区</a></li>

                     <li><a href="#none">出境优惠</a></li>

                     <li><a href="#none">教育缴费</a></li>

                     <li><a href="#none">全球商户</a></li>

                 </ul>

             </div>

         </div>

         <!--引入jQuery库-->

         <script type="text/javascript" src="js/lib/jquery-3.1.1.min.js" ></script>

         <!--作者：zhangjiangfeng 时间：2016-11-10 描述：选项卡内容切换-->

         <script type="text/javascript" src="js/unionpay.js"></script>

     </body>

 </html>

 @charset "utf-8";

 /* CSS Document */

 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 {

     margin: 0;

     padding: 0;

     border: 0;

     list-style: none;

     font: inherit;

     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

 }

 body {

     width: 100%;

     height:100%;

     font-size: 16px;

     color:#333;

     font-family: "Microsoft YaHei";

     -webkit-font-smoothing: antialiased;

 }

 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

     display: block;

 }

 table {

     border-collapse: collapse;

     border-spacing: 0;

 }

 input, textarea {

     border: 0;

 }

 /*去除a标签的虚线框*/

 a {

 blr:expression(this.onFocus=this.blur());

     outline: none;

     text-decoration:none;

 }

 .fr {

     float: right;

 }

 .fl {

     float: left;

 }

 .clearfix:after {

     visibility: hidden;

     display: block;

     font-size: 0;

     content: ".";

     clear: both;

     height: 0;

 }

 * html .clearfix {

     zoom: 1;

 }

 *:first-child + html .clearfix {

     zoom: 1;

 }

 ::-webkit-input-placeholder {

   color: #999;

 }

 :-moz-placeholder {/* Firefox 18- */

   color: #999;

 }

 ::-moz-placeholder{/* Firefox 19+ */

  color: #999;

 }

 :-ms-input-placeholder {

   color: #999;

 }

 html {

     width: 100%;

     height:100%;

     font-size: 16px;

 }

 .nav-bar {

     height: 40px;

     min-width: 1190px;

     width: 100%;

     background-color: #3A3A3A;

     color: #fff;

 }

 /*-----导航内容居中实现样式------*/

 .nav-content {

     width: 1190px;

     height: 40px;

     margin: 0 auto;

 }

 /*--------全部商品分类样式-------*/

 .all-product-kinds {

     width: 220px;

     height: 100%;

     background-color: #19A6A6;

     position: relative;

     float: left;

 }

 ul.silder-kinds {

     border-right: solid 1px #19A6A6;

 }

 .all-product-kinds .silder-kinds li:hover {

     background-color: #19A6A6;

 }

 .all-product-kinds .silder-kinds li:hover dl.main a {

     color: #FFFFFF;

 }

 .all-product-kinds .silder-kinds dl.main  a:hover {

     text-decoration: underline;

 }

 /*添加选中样式*/

 .all-product-kinds .silder-kinds li.active {

     background-color: #19A6A6;

 }

 .all-product-kinds .silder-kinds li.active dl.main a {

     color: #FFFFFF;

 }

 .all-product-kinds p {

     padding-left: 20px;

     line-height: 40px;

     cursor: pointer;

 }

 .all-product-kinds ul {

     list-style: none;

     position: absolute;

     left: 0;

     top: 40px;

     padding-top: 20px;

     width: 220px;

     min-height: 417px;

     font-size: 12px;

     background-color:#FFFFFF;

 }

 ul.silder-kinds dl.main dd {

     float: left;

     width: 65px;

     margin-top: 6px;

 }

 ul.silder-kinds dl.main dt a {

     color: #333;

     font-weight: 700;

 }

 ul.silder-kinds dl.main dd a {

     color: #666666;

 }

 ul.silder-kinds li {

     padding-left: 20px;

     padding-bottom: 10px;

 }

 .silder-kinds-detail {

     width: 780px;

     height: 417px;

     position: absolute;

     left:220px;

     top: 0;

     padding-top: 20px;

     background-color: #FFFFFF;

     border-color: #19A6A6;

     border-style: solid;

     border-width: 0 1px 1px;

 }

 .silder-kinds-detail dl {

     width: 335px;

     margin: 28px 0 0 39px;

     float: left;

 }

 .silder-kinds-detail dt {

     padding-bottom: 10px;

     border-bottom: 1px solid #D4D4D4;

 }

 .silder-kinds-detail dl dt a {

     font-weight: bolder;

     color: #333;

     font-size: 14px;

 }

 .silder-kinds-detail dl dd a  {

     color: #666;

 }

 .silder-kinds-detail dl dd a:hover {

     color: #19A6A6;

     text-decoration: underline;

 }

 .silder-kinds-detail dl dd {

     float: left;

     margin: 10px 22px 0 0;

 }

 .nav-bar ul.main-nav {

     list-style: none;

     outline: 0;

     float: left;

 }

 .nav-bar ul.main-nav li {

     display: inline-block;

     line-height: 40px;

 }

 .nav-bar ul.main-nav li.parent {

     position:relative;

 }

 .nav-bar ul.main-nav li a {

     text-decoration: none;

     color: #FFFFFF;

     display: block;

     padding: 0 20px;

 }

 .nav-bar ul.main-nav li a:hover {

     background-color: rgba(255,255,255,.2);

 }

 /*下拉菜单*/

 .level-2 {

     position: absolute;

     left: 0;

     top: 40px;

     background-color: #3a3a3a;

 }

 .level-2>li>a {

     display: block;

     padding: 0 20px;

     text-decoration: none;

     color: #fff;

 }

 .level-2>li>a {

     color: #19A6A6;

 }

 .level-2 {

     display: none;

 }

 ul.main-nav>li.global-btn:hover .level-2 {

     display: block;

 }

 .nav-bar ul.main-nav li>ul.level-2>li>a:hover {

     background-color: #19a6a6;

     color: #FFFFFF;

 }

 /**

  * 商品分类列表展示

  * Author zhangjiangfeng

  * Date 2016/11/12

  */

 $(function(){

     var $navTab = $("#nav-tab"); //选项卡

     var $navTabDetail = $navTab.find(".silder-kinds-detail");

     var $leftNavTab = $(".all-product-kinds p");

     var time = null;

     //选项卡内容之间切换

     /*$navTab.on("click","li", function(){

         var $that = $(this);

         $that.addClass("active").siblings().removeClass("active");

         $navTabDetail.each(function(i){

             var $_that = $(this);

             $_that.hide();

         });

         $that.find(".silder-kinds-detail").show();

     })*/

     $navTab.children("li").hover(function(){

         //清除定时器

         clearInterval(time);

         var $that = $(this);

         $that.addClass("active").siblings().removeClass("active");

         $navTabDetail.each(function(i){

             var $_that = $(this);

             $_that.hide();

         });

         //商品分类详情

         $that.find(".silder-kinds-detail").show();

     },function(){

         //商品分类详情

         time = setInterval(function(){

             $navTab.hide();

         },3000);

     })

     $leftNavTab.hover(function(){

         $navTab.show();

     });

 })

html5实现银联海购商品分类列表的更多相关文章

HTML5每日一练之OL列表的改良
在HTML5中的OL被改良了,为它增加了两个新属性. start属性:start属性用来定义列表编号的起始位置,比如下面的代码,列表将从50开始51...55以此类推 <ol start=&qu ...
Html5 基础－－－－列表详述
html5列表标签列表分为: 有序列表/无序列表/自定义列表,用的最多的为无序列表和自定义列表 1.有序列表(order list) eg:把
html 和 html5（一）（表格 | 列表 | 提交按钮 | 单选 |复选 | 框架 | 脚本 | html字符实体）
一.框架使用iframe来显示目录链接页面 iframe可以显示一个目标链接的页面目标链接的属性必须使用iframe的属性,如下实例: 实例 <iframe src="demo_i ...
HTML5 按字母顺序排列的标签列表 new : HTML5 中的新标签。
标签描述  定义注释. <!DOCTYPE> 定义文档类型. <a> 定义超链接. <abbr> 定义缩写. <acron ...
android 模仿大众点评团购卷列表多余3条时折叠,点击时显示剩余全部的功能
要实现这样一个效果:加载一组数据,当这组数据的条数超过2条时,则这显示两条,其余的隐藏,当点击“展开全部时”在显示余下的部分.效果如下图所示: 展开前的效果: 展开后的效果 : 实现思路:控制数据而不 ...
Java开源生鲜电商平台-团购模块设计与架构(源码可下载）
Java开源生鲜电商平台-团购模块设计与架构(源码可下载) 说明:任何一个电商系统中,对于促销这块是必不可少的,毕竟这块是最吸引用户的,用户也是最爱的模块之一,理由很简单,便宜. 我的经验是无论是大的 ...
python(2)之列表
列表的使用 names=["zhangyang","liming",["sese","popo"],"xiao ...
java小程序-----用if for写会员登陆和商品列表
一.父类 public class Father{ //父类 protected static int stock1 = 10; //库存 protected static int stock2 = ...
使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录
使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录时间:2012年9月20日分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web ...

随机推荐

PHP 静态
类分 1 普通成员是属于对象的 2 静态成员是属于类的例: class Ren { public $name; public static $zhongzu; static 就可以 ...
替代jquery1.9版本以前的toggle事件函数（开关）
以上文章为转载自http://blog.sina.com.cn/s/blog_50042fab0101c7a9.html var flag=1; $(".selector").cl ...
Design6：选择合适的数据类型
数据库使用Table来存储海量的数据,细分Table结构,数据最终存储在Table Column中,因此,在设计Table Schema时,必须慎重选择Table Column的Data Type,数 ...
SSISDB7：查看当前正在运行的Package
在项目组中做ETL开发时,经常会被问到:“现在ETL跑到哪一个Package了?” 为了缩短ETL运行的时间,在ETL的设计上,经常会使用并发执行模式:Task 并发执行,Package并发执行.对于 ...
一篇通俗易懂的CSS层叠顺序与层叠上下文研究
网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说啊,要是没有研究精神的才懒得管它).但自 ...
SQL Server中CTE的另一种递归方式-从底层向上递归
SQL Server中的公共表表达式(Common Table Expression,CTE)提供了一种便利的方式使得我们进行递归查询.所谓递归查询方便对某个表进行不断的递归从而更加容易的获得 ...
Ubuntu 14.04 64bit 安装tensorflow（GPU版本）
本博客主要用于在Ubuntu14.04 64bit 操作系统上搭建google开源的深度学习框架tensorflow. 0.安装CUDA和cuDNN 如果要安装GPU版本的tensorflow,就必须 ...
MVC4做网站后台:栏目管理1、添加栏目
把栏目添加删除跟前台混在一起结构清晰,现在有了后台管理的区域就把后台管理相关的代码分开. 要实现功能: 1.添加栏目 2.删除栏目 3.修改栏目信息 -- 一.开始 1.添加接口InterfaceC ...
HTTP的RST包与WinHttp延迟关闭TCP连接
一.RST包也常见于断开TCP连接几个月前用wireshark抓HTTP包发现有的网络通信在结束的时候没有使用四次握手,而是直接使用RST包.如: 在TCP协议中RST表示复位,用来异常的关闭连接 ...
Why Namespace? - 每天5分钟玩转 OpenStack（102）
上一节我们讨论了 Neutron 将虚拟 router 放置到 namespace 中实现了不同 subnet 之间的路由.今天探讨为什么要用 namespace 封装 router? 回顾一下前面的 ...

html5实现银联海购商品分类列表

html5实现银联海购商品分类列表的更多相关文章

随机推荐

热门专题