导航菜单

sideToggle - 侧边栏jquery插件

阿里云

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

使用方法:

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

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
  2. <script src="js/jquery.min.js" type="text/javascript"></script>
  3. <script src="js/velocity.min.js" type="text/javascript"></script>
  4. <script src="js/sideToggleExtended.js" type="text/javascript"></script>

HTML 结构:

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

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

初始化插件:

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

  1. $(document).ready(function(){
  2.   $('switch').sideToggle({
  3.     moving: 'null',
  4.     direction: 'null'
  5.   });
  6. });

配置参数:

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

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

sideToggle - 侧边栏 jquery 插件

已有 544 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!