导航菜单
sideToggle - 侧边栏jquery插件
PetitQ
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'
});
});
配置参数：
| 参数 | 描述 |
| switch | 指定点击哪个元素时会触发侧边栏按钮。 |
| moving | 指定侧边栏元素。 |
| direction | 侧边栏出现的方向。可选值有left和right。 |
该 jquery 侧边栏插件的 github 地址为：https://github.com/hjools/sideToggle
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
