首页>>导航菜单>>类似京东和易迅的菜单-可以折叠隐藏的导航菜单(2013-10-20)

类似京东和易迅的菜单-可以折叠隐藏的导航菜单

很流行的菜单，很多购物网站在使用，包括京东，新蛋中国，易迅都是类似的

演示地址可以存源码

类似京东和易迅的菜单-可以折叠隐藏的导航菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="mallNav">  
  2.     <div class="mallNav-con">  
  3.         <div id="mallTextNav" class="clearfix">  
  4.             <div id="mallCate">  
  5.                 <div class="tsCategory">  
  6.                     <h2 class="mcate-hd"><a href="sitemap.asp#product">所有分类</a><i></i></h2>  
  7.                     <div class="catemain" style="display: none;">     
  8.                         <div class="tsCategory-con">  
  9.                             <div class="mallCategory">  
  10.                                  <div class="entity">  
  11. <ul class="items">  
  12.                       
  13. <li class="item ">  
  14.                                      <h3><a href="#F1">电子.电器</a><s class="menuIcon"></s></h3>  
  15.                                      <p class="item-col">  
  16.                                       <a href="">电器礼品</a>   
  17.               
  18.              <a href="#32">电子礼品</a>   
  19.               
  20.               
  21.                                                                  
  22.                                        </p>  
  23.                                                              
  24.                             <div class="pop-subcategory" style="display: none;">  
  25.                               <div class="shadow">  
  26.                                 <div class="module">                                  
  27.                                   <div class="entity-main J_SubViewItem">  
  28.                                       
  29.                                     <div class="lst-subcategory">  
  30.                                           
  31.                                        
  32.                                     <dl><dt><a href="#32">电子礼品</a></dt>  
  33.                                     <dd>  
  34.                                         <a href="#32160" >数码相机</a>  
  35.        
  36.       <a href="#32161" >平板电脑</a>  
  37.        
  38.         
  39.                                     </dd>  
  40.                                                                                                                                              
  41.                                      </dl>  
  42.                                            
  43.                                   
  44.   
  45.       
  46.                                     <dl><dt><a href="#21">电器礼品</a></dt>  
  47.                                     <dd>  
  48.                                         <a href="#21118" >加湿器</a>  
  49.        
  50.       <a href="#21119" >电热水壶</a>  
  51.        
  52.   
  53.        
  54.         
  55.                                     </dd>  
  56.                                                                                                                                              
  57.                                      </dl>  
  58.                                            
  59.                                   
  60.   
  61.       
  62.                                                                               
  63.                                     </div>  
  64.                                                                           
  65.                                   </div>     
  66.                                 </div>  
  67.                               </div>   
  68.                             </div>                             
  69.                                                           
  70. </li>  
  71.                           
  72. <li class="item ">  
  73.                                      <h3><a href="#F2">家居.玩具</a><s class="menuIcon"></s></h3>  
  74.                                      <p class="item-col">  
  75.                                       <a href="#22">家居礼品</a>   
  76.               
  77.              <a href="#28">毛绒玩具</a>   
  78.               
  79.               
  80.                                                                  
  81.                                        </p>  
  82.                                                              
  83.                             <div class="pop-subcategory" style="display: none;">  
  84.                               <div class="shadow">  
  85.                                 <div class="module">                                  
  86.                                   <div class="entity-main J_SubViewItem">  
  87.                                       
  88.                                     <div class="lst-subcategory">  
  89.                                           
  90.                                        
  91.                                     <dl><dt><a href="#22">家居礼品</a></dt>  
  92.                                     <dd>  
  93.                                         <a href="#2277" >创意厨房</a>  
  94.   
  95.       <a href="#22157" >收纳凳</a>  
  96.        
  97.       <a href="#22163" >抱枕被</a>  
  98.        
  99.       <a href="#22164" >绒金蛇</a>  
  100.        
  101.         
  102.                                     </dd>  
  103.                                                                                                                                              
  104.                                      </dl>  
  105.                                            
  106.                                   
  107.   
  108.       
  109.                                     <dl><dt><a href="#28">毛绒玩具</a></dt>  
  110.                                     <dd>  
  111.                                         <a href="#2893" >美人兔</a>  
  112.        
  113.       <a href="#2894" >毛绒玩具</a>  
  114.        
  115.       <a href="#28117" >抱抱熊</a>  
  116.        
  117.         
  118.                                     </dd>  
  119.                                                                                                                                              
  120.                                      </dl>  
  121.                                            
  122.                                   
  123.   
  124.       
  125.                                                                               
  126.                                     </div>  
  127.                                                                           
  128.                                   </div>     
  129.                                 </div>  
  130.                               </div>   
  131.                             </div>                             
  132.                                                           
  133. </li>  
  134.                           
  135. <li class="item ">  
  136.                                      <h3><a href="#F3">广告.创意.庆典</a><s class="menuIcon"></s></h3>  
  137.                                      <p class="item-col">  
  138.                                       <a href="#25">创意礼品</a>   
  139.               
  140.              <a href="#27">广告礼品</a>   
  141.               
  142.              <a href="#31">庆典礼品</a>   
  143.               
  144.               
  145.                                                                  
  146.                                        </p>  
  147.                                                              
  148.                             <div class="pop-subcategory" style="display: none;">  
  149.                               <div class="shadow">  
  150.                                 <div class="module">                                  
  151.                                   <div class="entity-main J_SubViewItem">  
  152.                                       
  153.                                     <div class="lst-subcategory">  
  154.                                           
  155.                                        
  156.                                     <dl><dt><a href="#27">广告礼品</a></dt>  
  157.                                     <dd>  
  158.                                         <a href="#2729" >广告气球</a>  
  159.   
  160.        
  161.       <a href="#2762" >广告餐具</a>  
  162.        
  163.       <a href="#2763" >广告烟缸</a>  
  164.        
  165.       <a href="#2764" >广告沙滩椅</a>  
  166.        
  167.       <a href="#2765" >广告购物袋</a>  
  168.        
  169.       <a href="#2766" >广告纸巾</a>  
  170.        
  171.   
  172.         
  173.                                     </dd>  
  174.                                                                                                                                              
  175.                                      </dl>  
  176.                                            
  177.                                   
  178.   
  179.       
  180.                                     <dl><dt><a href="#25">创意礼品</a></dt>  
  181.                                     <dd>  
  182.                                         <a href="#2576" >巧妙收纳</a>  
  183.        
  184.       <a href="#2596" >储蓄罐</a>  
  185.        
  186.         
  187.                                     </dd>  
  188.                                                                                                                                              
  189.                                      </dl>  
  190.                                            
  191.                                   
  192.   
  193.       
  194.                                     <dl><dt><a href="#31">庆典礼品</a></dt>  
  195.                                     <dd>  
  196.                                         <a href="#3185" >秀场道具</a>  
  197.        
  198.       <a href="#3186" >婚庆用品</a>  
  199.        
  200.         
  201.                                     </dd>  
  202.                                                                                                                                              
  203.                                      </dl>  
  204.                                            
  205.                                   
  206.   
  207.       
  208.                                                                               
  209.                                     </div>  
  210.                                                                           
  211.                                   </div>     
  212.                                 </div>  
  213.                               </div>   
  214.                             </div>                             
  215.                                                           
  216. </li>  
  217.                           
  218. <li class="item ">  
  219.                                      <h3><a href="#F4">健身.户外</a><s class="menuIcon"></s></h3>  
  220.                                      <p class="item-col">  
  221.                                       <a href="#23">健身按摩</a>   
  222.               
  223.              <a href="#24">户外礼品</a>   
  224.               
  225.               
  226.                                                                  
  227.                                        </p>  
  228.                                                              
  229.                             <div class="pop-subcategory" style="display: none;">  
  230.                               <div class="shadow">  
  231.                                 <div class="module">                                  
  232.                                   <div class="entity-main J_SubViewItem">  
  233.                                       
  234.                                     <div class="lst-subcategory">  
  235.                                           
  236.                                        
  237.                                     <dl><dt><a href="#23">健身按摩</a></dt>  
  238.                                     <dd>  
  239.                                         <a href="#2397" >健身用品</a>  
  240.        
  241.       <a href="#2398" >按摩用品</a>  
  242.        
  243.   
  244.        
  245.         
  246.                                     </dd>  
  247.                                                                                                                                              
  248.                                      </dl>  
  249.                                            
  250.                                   
  251.   
  252.       
  253.                                     <dl><dt><a href="#24">户外礼品</a></dt>  
  254.                                     <dd>  
  255.                                         <a href="#24101" >野营用品</a>  
  256.        
  257.       <a href="#24102" >休闲用品</a>  
  258.        
  259.   
  260.         
  261.                                     </dd>  
  262.                                                                                                                                              
  263.                                      </dl>  
  264.                                            
  265.                                   
  266.   
  267.       
  268.                                                                               
  269.                                     </div>  
  270.                                                                           
  271.                                   </div>     
  272.                                 </div>  
  273.                               </div>   
  274.                             </div>                             
  275.                                                           
  276. </li>  
  277.                           
  278. <li class="item ">  
  279.                                      <h3><a href="#F5">办公.汽车</a><s class="menuIcon"></s></h3>  
  280.                                      <p class="item-col">  
  281.                                       <a href="#29">汽车礼品</a>   
  282.               
  283.              <a href="#30">办公礼品</a>   
  284.               
  285.               
  286.                                                                  
  287.                                        </p>  
  288.                                                              
  289.                             <div class="pop-subcategory" style="display: none;">  
  290.                               <div class="shadow">  
  291.                                 <div class="module">                                  
  292.                                   <div class="entity-main J_SubViewItem">  
  293.                                       
  294.                                     <div class="lst-subcategory">  
  295.                                           
  296.                                        
  297.                                     <dl><dt><a href="#30">办公礼品</a></dt>  
  298.                                     <dd>  
  299.                                         <a href="#30104" >电脑周边</a>  
  300.        
  301.       <a href="#30105" >计算器</a>  
  302.        
  303.       <a href="#30106" >笔筒</a>  
  304.        
  305.       <a href="#30107" >办公用品</a>  
  306.        
  307.         
  308.                                     </dd>  
  309.                                                                                                                                              
  310.                                      </dl>  
  311.                                            
  312.                                   
  313.   
  314.       
  315.                                     <dl><dt><a href="#29">汽车礼品</a></dt>  
  316.                                     <dd>  
  317.                                         <a href="#2991" >电子类</a>  
  318.        
  319.       <a href="#2992" >实用类</a>  
  320.        
  321.         
  322.                                     </dd>  
  323.                                                                                                                                              
  324.                                      </dl>  
  325.                                            
  326.                                   
  327.   
  328.       
  329.                                                                               
  330.                                     </div>  
  331.                                                                           
  332.                                   </div>     
  333.                                 </div>  
  334.                               </div>   
  335.                             </div>                             
  336.                                                           
  337. </li>  
  338.                           
  339. <li class="item ">  
  340.                                      <h3><a href="#F6">陶瓷</a><s class="menuIcon"></s></h3>  
  341.                                      <p class="item-col">  
  342.                                       <a href="#26">陶瓷礼品</a>   
  343.               
  344.               
  345.                                                                  
  346.                                        </p>  
  347.                                                              
  348.                             <div class="pop-subcategory" style="display: none;">  
  349.                               <div class="shadow">  
  350.                                 <div class="module">                                  
  351.                                   <div class="entity-main J_SubViewItem">  
  352.                                       
  353.                                     <div class="lst-subcategory">  
  354.                                           
  355.                                        
  356.                                     <dl><dt><a href="#26">陶瓷礼品</a></dt>  
  357.                                     <dd>  
  358.                                         <a href="#2683" >茶具礼盒</a>  
  359.        
  360.       <a href="" >瓷器摆件</a>  
  361.   
  362.        
  363.         
  364.                                     </dd>  
  365.                                                                                                                                              
  366.                                      </dl>  
  367.                                            
  368.                                   
  369.   
  370.       
  371.                                                                               
  372.                                     </div>  
  373.                                                                           
  374.                                   </div>     
  375.                                 </div>  
  376.                               </div>   
  377.                             </div>                             
  378.                                                           
  379. </li>  
  380.       
  381.                                              </ul>  
  382.                 </div>  
  383.               </div>  
  384.            
  385.      </div>      
  386.       
  387.       
  388. </div>  
  389. </div>  
  390.   
  391.   
  392. <script type="text/javascript" src="menu/qfgoodscat.js"></script>  
  393. </div>  
  394. <div class="mallNav-main">  
  395.     <ul class="MenuList MenuList_943 clearfix">  
  396.         <li class=""><a href="">首页</a></li>  
  397.         <li class=""><a href="">特价礼品</a></li>  
  398.         <li class=""><a href="">品牌专区</a></li>  
  399.         <li class=""><a href="">会员中心</a></li>  
  400.     </ul>  
  401. </div>  
  402.              
  403.         </div>     
  404.   </div>  
  405. </div>  
  406. <script>  
  407. var mDm3 = $E('.tsCategory');  
  408. if (!mDm3.hasClass('hover')){  
  409.     var mFloat = $E('.tsCategory .catemain');  
  410.     mDm3.addEvents({  
  411.         'mouseenter': function () {  
  412.             this.addClass('hover');  
  413.             mFloat.setStyle('display', 'block');  
  414.         },  
  415.         'mouseleave': function () {  
  416.             this.removeClass('hover');  
  417.             mFloat.setStyle('display','none');  
  418.         }  
  419.     })  
  420. }  
  421. </script>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_67.html