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

随机推荐

Atitit 设计模式与算法，与流程的关系
Atitit 设计模式与算法,与流程的关系 1.1. 设计模式就是算法就是流程,不同的方面看法不同,抽象方法不同而造成的假象. 软件就是由设计模式累积成的.也可以说算法累计成的.. ,而可以用Vis ...
ASP.NET Core 1.0 静态文件、路由、自定义中间件、身份验证简介
概述 ASP.NET Core 1.0是ASP.NET的一个重要的重新设计. 例如,在ASP.NET Core中,使用Middleware编写请求管道. ASP.NET Core中间件对HttpCon ...
Javascript学习记录——原生JS实现旋转木马特效
昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...
c#属性中的get和set属性
get是给属性赋值,set是取属性的值. get.set用法: 一是隐藏组件或类内部的真是成员: 二是用来建立约束的,比如,实现“有我没你”这种约束: 三是用来响应属性变化事件,当属性变化是做某事,只 ...
php的mysql\mysqli\PDO(二)mysqli
原文链接:http://www.orlion.ga/1147/ mysqli有面向对象风格和面向过程风格,个人感觉还是用面向对象风格比较好(毕竟是面向对象) 1.mysqli::_construct( ...
.NET平台开源项目速览(3)小巧轻量级NoSQL文件数据库LiteDB
今天给大家介绍一个不错的小巧轻量级的NoSQL文件数据库LiteDB.本博客在2013年也介绍过2款.NET平台的开源数据库: 1.[原创]开源.NET下的XML数据库介绍及入门 2.[原创]C#开源 ...
引用类型-Object类型
创建Object实例的方式有两种. 第一种是使用new操作符后跟Object构造函数 var person = new Object(); person.name = "liao" ...
MySQL官方.NET Core驱动已出，支持EF Core
千呼万唤始出来MySQL官方.NET Core驱动已出,支持EF Core. 昨天MySQL官方已经发布了.NET Core 驱动,目前还是预览版,不过功能已经可用. NuGet 地址:https:/ ...
C++基础知识
基础知识 &&和||具有"短路"特性,特别是在第二个操作数有++或--时要注意. 显式类型转换 (类型说明符)表达式 //C风格的类型说明符(表达式) //cpp ...
MSIL Hello World
最近由于需要,开始阅读 MSIL 方面的东西.我读的是<.NET 探秘——MSIL 权威指南>(<Expert .NET 2.0 IL Assembler>中译版).感觉没什么 ...

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

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

随机推荐

热门专题