首页>>导航菜单>>SwipeNav 手势插件导航(2019-01-05)

SwipeNav 手势插件导航

SwipeNav 手势插件导航
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <nav id="swipeNav">  
  2.         <ul>  
  3.             <li><a href="" target="_blank">Download</a></li>  
  4.             <li><a href="" target="_blank">Author</a></li>  
  5.             <li><a href="license.html">License</a></li>  
  6.             <li><a href="source.html">SourceCode</a></li>  
  7.         </ul>  
  8.     </nav>  
  9.     <div id="container">  
  10.         <img src="img/list-icon.png" alt="" width="24" height="24" id="menuBtn" />  
  11.         <h1>jQuery Plugin SwipeNav</h1>  
  12.         <div id="main"></div><!-- /#main -->  
  13.     </div><!-- /#container -->  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.         jQuery(document).ready(function($){  
  3.   
  4.             //Google Font  
  5.             WebFontConfig = {  
  6.                 google: { families: [ 'Raleway::latin' ] }  
  7.             };  
  8.             (function() {  
  9.                 var wf = document.createElement('script');  
  10.                 wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';  
  11.                 wf.type = 'text/javascript';  
  12.                 wf.async = 'true';  
  13.                 var s = document.getElementsByTagName('script')[0];  
  14.                 s.parentNode.insertBefore(wf, s);  
  15.             })();  
  16.   
  17.             //Page Action  
  18.             $(document).on('click','#swipeNav li a',function(){  
  19.                 var href= $(this).attr("href");  
  20.                 switch(href){  
  21.                     case '#license':  
  22.                         $('#main').load('license.html');  
  23.                         return false;  
  24.                     break;  
  25.                     case '#src':  
  26.                         $('#main').load('src.html');  
  27.                         return false;  
  28.                     break;  
  29.                 }  
  30.             });  
  31.   
  32.             //jQueryPlug-in Slide-Nav  
  33.             $('#swipeNav').swipeNav();  
  34.         });  
  35.     </script>  

 


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