首页>>导航菜单>>多级响应式导航菜单(2018-10-22)

多级响应式导航菜单

多级响应式导航菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1.    <nav>  
  2. <div>  
  3.   <i class="fa fa-bars"></i>  
  4. </div>  
  5.   
  6. <ul>  
  7.   <li><a href="#">Freejs.net</a></li>  
  8.   <li><a href="#">JavaScript <i class="fa fa-sort-desc"></i></a>  
  9.     <ul>  
  10.       <li><a href="#">jQuery</a></li>  
  11.       <li><a href="#">Vanilla JavaScript</a></li>  
  12.       <li><a href="#">ReactJS</a></li>  
  13.       <li><a href="#">VueJS</a></li>  
  14.     </ul>  
  15.   </li>  
  16.   <li><a href="#">Graphic Design <i class="fa fa-sort-desc"></i></a>  
  17.     <ul>  
  18.       <li><a href="#">Font</a></li>  
  19.       <li><a href="#">PSD</a></li>  
  20.       <li><a href="#">Illustration</a></li>  
  21.       <li><a href="#">Texture</a></li>  
  22.     </ul>  
  23.   </li>  
  24.   <li><a href="#">About</a></li>  
  25.   <li><a href="#">Contact</a></li>  
  26. </ul>  
  27. nav>  
  28.   
  29.      

 

JavaScript Code
  1. <script type="text/javascript">  
  2.   
  3.      $("nav div").click(function() {  
  4.            $("ul").slideToggle();  
  5.            $("ul ul").css("display", "none");  
  6.      });  
  7.   
  8.      $("ul li").click(function() {  
  9.            $("ul ul").slideUp();  
  10.            $(this).find('ul').slideToggle();  
  11.      });  
  12.   
  13.      $(window).resize(function() {  
  14.            if($(window).width() > 768) {  
  15.                  $("ul").removeAttr('style');  
  16.            }  
  17.      });  
  18.   
  19.      </script>  

 


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