首页>>导航菜单>>侧边栏隐藏菜单(2020-04-10)

侧边栏隐藏菜单

侧边栏隐藏菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <nav>  
  2.   <a href="#" id="userPLink">  
  3.     <span class="fa fa-user"></span>  
  4.     username   
  5.   </a>  
  6.   <div id="sideMenu">  
  7.     <span class="fa fa-navicon" id="sideMenuClosed"></span>  
  8.   </div>  
  9. </nav>  
  10.   
  11.   
  12. <div id="sideMenuContainer">  
  13.   <h2>heading</h2>  
  14.   <a href="#" title="new user guide"><span class="fa fa-bolt"></span></a>  
  15.   <a href="#" title="rules"><span class="fa fa-exclamation-circle"></span></a>  
  16.   <a href="#" title="setting"><span class="fa fa-map"></span></a>  
  17.   <a href="#" title="usergroups"><span class="fa fa-info-circle"></span></a>  
  18.   <a href="#" title="directory"><span class="fa fa-users"></span></a>  
  19.   <a href="#" title="claims"><span class="fa fa-camera"></span></a>  
  20.   <a href="#" title="summaries"><span class="fa fa-commenting"></span></a>  
  21.   <a href="#" title="requests"><span class="fa fa-heart"></span></a>  
  22.   <a href="#" title="unanswered"><span class="fa fa-flag"></span></a>  
  23.   <a href="#" title="faq / suggestions"><span class="fa fa-question-circle"></span></a>  
  24.   <a href="#" title="chat"><span class="fa fa-glass"></span></a>  
  25. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.     $(document).ready(function(){  
  3.       $('#sideMenu').sideToggle({  
  4.         moving: '#sideMenuContainer',  
  5.         direction: 'right'  
  6.       });  
  7.   
  8.     });  
  9. </script>  

 


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