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

随机推荐

Android笔记——eclipse快捷键
查看快捷键定义的地方 Window->Preferences->General->Keys. 编辑相关快捷键 1. [ALT+/] 自动提示方法此快捷键为用户编辑的好帮手,能为用户 ...
TSQL 数据类型转换
转换函数 cast 或 convert 将表达式类型转换成另一个数据类型,如果转换失败,将导致整个事务失败.SQL Server 2012 新增两个转换函数:try_cast 和 try_conver ...
详解Java中ArrayList、Vector、LinkedList三者的异同点(转)
本文转自http://my.oschina.net/zzw922cn/blog/491631 一.ArrayList ArrayList是一个可以处理变长数组的类型,这里不局限于“数”组,ArrayL ...
前端学PHP之字符串函数
× 目录 [1]特点 [2]输出 [3]空格[4]大小写[5]HTML[6]格式化[7]比较前面的话字符串的处理和分析在任何编程语言中都是一个重要的基础,往往是简单而重要的.信息的分类.解析.存储 ...
窥探Swift系列博客说明及其Swift版本间更新
Swift到目前为止仍在更新,每次更新都会推陈出新,一些Swift旧版本中的东西在新Swift中并不适用,而且新版本的Swift会添加新的功能.到目前为止,Swift为2.1版本.去年翻译的Swift ...
窥探Swift之别具一格的Struct和Class
说到结构体和类,还是那句话,只要是接触过编程的小伙伴们对这两者并不陌生.但在Swift中的Struct和Class也有着令人眼前一亮的特性.Struct的功能变得更为强大,Class变的更为灵活.St ...
iOS开发之遍历Model类的属性并完善使用Runtime给Model类赋值
在上篇博客<iOS开发之使用Runtime给Model类赋值>中介绍了如何使用运行时在实体类的基类中添加给实体类的属性赋值的方法,这个方法的前提是字典的Key必须和实体类的Property ...
Apache Sqoop - Overview——Sqoop 概述
Apache Sqoop - Overview Apache Sqoop 概述使用Hadoop来分析和处理数据需要将数据加载到集群中并且将它和企业生产数据库中的其他数据进行结合处理.从生产系统加载大 ...
ZOJ Problem Set - 1334 Basically Speaking ac代码及总结
这道题目不难,是一道简单的进制转换问题,但是发现了自己两个遗漏的知识点: 1.关于scanf (1)scanf函数在输入时是以回车或者空格作为一次输入的结束 (2)scanf函数在输入字符串的过程中是 ...
软件工程 Coding.net代码托管平台 Git初学者的使用总结五步完成程序，文件，文件夹的Git
一.前言第一次用git相关的命令行,我使用的是Coding.net代码托管平台.Coding.net 自主打造的基于 Git 的代码托管平台,提供高性能的远端仓库,还有保护分支,历史版本分屏对比. ...

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

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

随机推荐

热门专题