jquery侧边栏插件sideToggle

sideToggle是一款简单的jquery侧边栏插件。它可以通过velocity.js来替代jQuery的animate()动画，提供动画效果。

使用方法

在页面中引入jquery和velocity.min.js，以及sideToggleExtended.js文件。

<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/velocity.min.js" type="text/javascript"></script>
<script src="js/sideToggleExtended.js" type="text/javascript"></script>
                

HTML结构

该jquery侧边栏插件的HTML结构如下：

<nav>
  <!--侧边栏按钮-->
  <div id="sideMenu">
    <span class="fa fa-navicon" id="sideMenuClosed"></span>
  </div>
</nav>

<!--侧边栏-->
<div id="sideMenuContainer">
  <h2>heading</h2>
  <a href="#" title="new user guide"><span class="fa fa-bolt"></span></a>
  <a href="#" title="rules"><span class="fa fa-exclamation-circle"></span></a>
  <a href="#" title="setting"><span class="fa fa-map"></span></a>
  <a href="#" title="usergroups"><span class="fa fa-info-circle"></span></a>
  <a href="#" title="directory"><span class="fa fa-users"></span></a>
  <a href="#" title="claims"><span class="fa fa-camera"></span></a>
  <a href="#" title="summaries"><span class="fa fa-commenting"></span></a>
  <a href="#" title="requests"><span class="fa fa-heart"></span></a>
  <a href="#" title="unanswered"><span class="fa fa-flag"></span></a>
  <a href="#" title="faq / suggestions"><span class="fa fa-question-circle"></span></a>
  <a href="#" title="chat"><span class="fa fa-glass"></span></a>
</div>
                

初始化插件

在页面DOM元素加载完毕之后，通过sideToggle()方法来初始化该插件。

$(document).ready(function(){
  $('switch').sideToggle({
    moving: 'null',
    direction: 'null'
  });
});          
                

配置参数

该jquery侧边栏插件的可用配置参数有：

该jquery侧边栏插件的github地址为：https://github.com/hjools/sideToggle