jquery侧边栏插件sideToggle_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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侧边栏插件的可用配置参数有：

参数	描述
switch	指定点击哪个元素时会触发侧边栏按钮。
moving	指定侧边栏元素。
direction	侧边栏出现的方向。可选值有`left`和`right`。