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 ...

随机推荐

SqlServer索引的原理与应用
索引的概念索引的用途:我们对数据查询及处理速度已成为衡量应用系统成败的标准,而采用索引来加快数据处理速度通常是最普遍采用的优化方法. 索引是什么:数据库中的索引类似于一本书的目录,在一本书中使用目录 ...
【Win10 应用开发】OCR识别
OCR,即Optical Character Recognition,光学字符识别.以下介绍来自搜索: OCR(Optical Character Recognition,光学字符识别)是指电子设备( ...
【Win 10开发】协议-上篇：自定义应用协议
就像系统许多内置应用可以通过URI来启动(如ms-settings-bluetooth:可以打开蓝牙设置页),我们自己开发的应用程序,如果需要的话,可以为应用程序自定义一个协议.应用程序协议在安装时会 ...
Panorama和Pivot的区别
Panorama 1.提供了更丰富的用户体验(建议最多4个Items项) 2.Item可以设置屏幕方向为水平,支持多于一个屏幕的显示 3.可以使用任意大小的背景图片,Panorama会自动地缩放为屏幕 ...
ELF静态链接
一直对ELF目标文件是怎样链接成可执行文件感到比较的疑惑,ELF文件里面的重定位段是怎样解决符号引用问题的?前几天偶然看了<深入理解计算机系统>里面讲了这个问题,看了之后对里面的实现机制终 ...
【记录】ASP.NET XSS 脚本注入攻击
输入进行 Html 转码: HttpUtility.HtmlEncode(content); 输入保留 Html 标记,使用 AntiXSS 过滤: Install-Package AntiXSS M ...
android studio 导入有so 文件的项目是，程序崩溃的可能原因
被这玩意坑了2个多小时. ----------------------------------- 由于 android studio 在建项目时,不会自动识别 so 文件,所以在含有so 文件的项目中 ...
Unity调用Android类方法
Unity调用Android类方法 1．添加Unity的classes.jar文件创建一个Android工程AndroidUnityDemo. 由于Unity的版本不同,直接在Unity安装包文 ...
关于Java中的final关键字
Java中的final关键字是用来限制用户行为的,说白了,就是用来限制我们这些程序员的.final可以用来修饰:变量.方法.类. 1)Java final variable final用来修饰变量时, ...
工作流引擎Oozie（二）：coordinator
1. 简介 coordinator是workflow的定时提交器,基于时间条件与数据生成触发(based on time and data triggers).简单点说,coordinator按所定义 ...

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

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

随机推荐

热门专题