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

2022-10-04 11:32:56

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();

     });

 })

码农公寓

相关文章