商品分类侧边栏商城导航菜单

创客云

这是一款使用jquery制作的带商品分类侧边栏列表的商城导航菜单。该商城菜单兼容ie8浏览器。用户可以通过点击左侧的下拉菜单来查看各种商品的列表,非常实用和方便。

使用方法:

在页面中引入样式文件style.css和jquery.min.js文件。

  1. <link rel="stylesheet" href="style.css">
  2. <script src="jquery.min.js"></script>

HTML结构:

该商城导航菜单的HTML结构如下:

  1. <div class="header-wrap">
  2.   <div class="navwrap">
  3.     <div id="nav">
  4.       <div class="navbar clearfix">
  5.         <a class="navbt" href="#"><span>团购地图</span></a>
  6.         <a class="current" href="#">首页</a>
  7.         <a href="#">餐饮美食</a>
  8.         <a href="#">休闲娱乐</a>
  9.         <a href="#">旅游住宿</a>
  10.         <a href="#">生活服务</a>
  11.         <a href="#">丽人</a>
  12.         <a href="#">商品</a>
  13.       </div>
  14.       <div class="pros subpage">
  15.         <h2>全部团购分类</h2>
  16.         <ul class="prosul clearfix" id="proinfo">
  17.           <li class="food">
  18.             <i>></i>
  19.             <a class="ti" href="#">美食</a>
  20.             <a class="hot" href="#">地方菜</a>
  21.             <a href="#">火锅</a>
  22.             <div class="prosmore hide">
  23.               <span><em><a href="#">全部(117)</a></em></span>
  24.               <span><em class="morehot"><a class="morehot" href="#">火锅(17)</a></em></span>
  25.               <span><em class="morehot"><a class="morehot" href="#">烧烤(16)</a></em></span>
  26.               <span><em><a href="#">西餐(9)</a></em></span>
  27.               <span><em><a href="#">海鲜(37)</a></em></span>
  28.               <span><em><a href="#">地方菜(5)</a></em></span>
  29.               <span><em><a href="#">日韩料理(2)</a></em></span>
  30.               <span><em><a href="#">快餐(2)</a></em></span>
  31.               <span><em class="morehot"><a class="morehot" href="#">蛋糕(9)</a></em></span>
  32.               <span><em><a href="#">其他(7)</a></em></span>
  33.               <span><em><a href="#">下午茶(5)</a></em></span>
  34.               <span><em><a href="#">咖啡(8)</a></em></span>
  35.             </div>
  36.           </li>
  37.           <li class="enjoy">
  38.             <i>></i>
  39.             <a class="ti" href="#">休闲</a>
  40.             <a class="hot" href="#">电影</a>
  41.             <a href="#">KTV</a>
  42.             <div class="prosmore hide">
  43.               <span><em><a href="#">全部(663)</a></em></span>
  44.               <span><em class="morehot"><a class="morehot" href="#">电影(18)</a></em></span>
  45.               <span><em class="morehot"><a class="morehot" href="#">KTV(8)</a></em></span>
  46.               <span><em><a href="#">运动健身(95)</a></em></span>
  47.               <span><em><a href="#">游乐电玩(48)</a></em></span>
  48.               <span><em><a href="#">展览演出(13)</a></em></span>
  49.               <span><em class="morehot"><a class="morehot" href="#">足疗按摩(8)</a></em></span>
  50.               <span><em><a href="#">洗浴(11)</a></em></span>
  51.               <span><em><a href="#">其他(29)</a></em></span>
  52.               <span><em><a href="#">采摘(2)</a></em></span>
  53.               <span><em><a href="#">滑雪(4)</a></em></span>
  54.               <span><em><a href="#">温泉(427)</a></em></span>
  55.             </div>
  56.           </li>
  57.           <li class="travel">
  58.             <i>></i>
  59.             <a class="ti" href="#">旅游</a>
  60.             <a class="hot" href="#">酒店</a>
  61.             <a href="#">旅游</a>
  62.             <div class="prosmore hide">
  63.               <span><em><a href="#">全部(13602)</a></em></span>
  64.               <span><em class="morehot"><a class="morehot" href="#">酒店(9044)</a></em></span>
  65.               <span><em><a href="#">旅游(1775)</a></em></span>
  66.               <span><em><a href="#">景点公园(935)</a></em></span>
  67.               <span><em><a href="#">其他(1848)</a></em></span>
  68.             </div>
  69.           </li>
  70.           <li class="life">
  71.             <i>></i>
  72.             <a class="ti" href="#">生活</a>
  73.             <a href="#">婚纱摄影</a>
  74.             <a href="#">写真</a>
  75.             <div class="prosmore hide">
  76.               <span><em><a href="#">全部(333)</a></em></span>
  77.               <span><em><a href="#">写真(9)</a></em></span>
  78.               <span><em class="morehot"><a class="morehot" href="#">婚纱摄影(212)</a></em></span>
  79.               <span><em><a href="#">儿童摄影(1)</a></em></span>
  80.               <span><em><a href="#">汽车养护(3)</a></em></span>
  81.               <span><em><a href="#">教育培训(91)</a></em></span>
  82.               <span><em><a href="#">体检(8)</a></em></span>
  83.               <span><em><a href="#">口腔(1)</a></em></span>
  84.               <span><em><a href="#">其他(8)</a></em></span>
  85.             </div>
  86.           </li>
  87.           <li class="women">
  88.             <i>></i>
  89.             <a class="ti" href="#">丽人</a>
  90.             <a href="#">美发</a>
  91.             <a href="#">美容美体</a>
  92.             <div class="prosmore hide">
  93.               <span><em><a href="#">全部(14)</a></em></span>
  94.               <span><em class="morehot"><a class="morehot" href="#">美发(7)</a></em></span>
  95.               <span><em><a href="#">美甲(3)</a></em></span>
  96.               <span><em><a href="#">美容美体(4)</a></em></span>
  97.             </div>
  98.           </li>
  99.           <li class="goods bd-solid">
  100.             <i>></i>
  101.             <a class="ti" href="#">商品</a>
  102.             <a href="#">服装</a>
  103.             <a href="#">鞋靴</a>
  104.             <div class="prosmore hide">
  105.               <span><em><a href="#">全部(112343)</a> </em></span>
  106.               <span><em class="morehot"><a class="morehot" href="#">服装(32747)</a> </em></span>
  107.               <span><em><a href="#">生活家居(14441)</a> </em></span>
  108.               <span><em><a href="#">食品饮料(10116)</a> </em></span>
  109.               <span><em><a href="#">化妆品(12707)</a> </em></span>
  110.               <span><em><a href="#">箱包(7621)</a> </em></span>
  111.               <span><em><a href="#">家用电器(3775)</a> </em></span>
  112.               <span><em><a href="#">手机数码(3639)</a> </em></span>
  113.               <span><em><a href="#">鞋靴(11686)</a> </em></span>
  114.               <span><em><a href="#">饰品(4558)</a> </em></span>
  115.               <span><em><a href="#">手表(1482)</a> </em></span>
  116.               <span><em><a href="#">母婴用品(3659)</a> </em></span>
  117.               <span><em><a href="#">玩具(777)</a> </em></span>
  118.               <span><em><a href="#">抽奖(7)</a> </em></span>
  119.               <span><em><a href="#">礼品(197)</a> </em></span>
  120.               <span><em><a href="#">其他(4931)</a> </em></span>
  121.             </div>
  122.           </li>
  123.           <li class="hotareas nochild last">
  124.             <h2>热门搜索</h2>
  125.             <br />
  126.             <a class="mhs" href="#">美食</a>
  127.             <a class="mhs" href="#">游泳</a>
  128.             <a class="mhs" href="#">蛋糕</a>
  129.             <a class="mhs" href="#">电影</a>
  130.             <a class="mhs" href="#">眼镜</a>
  131.             <a class="mhs" href="#">自助餐</a>
  132.             <a class="mhs" href="#">酒吧</a>
  133.             <a class="mhs" href="#">美甲</a>
  134.             <a class="mhs" href="#">酒店</a>
  135.             <a class="mhs" href="#">粽子</a>
  136.           </li>
  137.         </ul>
  138.       </div>
  139.     </div>
  140.   </div>
  141. </div>

JavaScript代码:

在页面DOM元素加载完毕之后,通过下面的方法来初始化该导航菜单:

  1. (function(){
  2.   var $subblock = $(".subpage"), $head=$subblock.find('h2'), $ul = $("#proinfo"), $lis = $ul.find("li"), inter=false;
  3.  
  4.   $head.click(function(e){
  5.     e.stopPropagation();
  6.     if(!inter){
  7.       $ul.show();
  8.     }else{
  9.       $ul.hide();
  10.     }
  11.     inter=!inter;
  12.   });
  13.  
  14.   $ul.click(function(event){
  15.     event.stopPropagation();
  16.   });
  17.  
  18.   $(document).click(function(){
  19.     $ul.hide();
  20.     inter=!inter;
  21.   });
  22.  
  23.   $lis.hover(function(){
  24.     if(!$(this).hasClass('nochild')){
  25.       $(this).addClass("prosahover");
  26.       $(this).find(".prosmore").removeClass('hide');
  27.     }
  28.   },function(){
  29.     if(!$(this).hasClass('nochild')){
  30.       if($(this).hasClass("prosahover")){
  31.         $(this).removeClass("prosahover");
  32.       }
  33.       $(this).find(".prosmore").addClass('hide');
  34.     }
  35.   });
  36.  
  37. })();
演示地址 下载地址
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/31351.html
云模板

发表评论

热销模板

高端信息技术产品展示DedeCMS织梦中英文模板

Envato

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

8年专注高端建站

秋风送爽佳节至,中秋回馈活动现已同步开启:

①、模板商店买一送一,全年仅此一次不容错过 ---》云模板

②、创客云主机充100送100元,充200送200元,以此类推上限2000元 ---》云主机

咨 询 客 服