使用这个隐藏侧边栏插件要引入jQuery和BootSideMenu.js、BootSideMenu.css文件以及所需要的Bootstrap文件。

  1. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

  2. <link rel="stylesheet" href="css/BootSideMenu.css">

  3. <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

  4. <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

  5. <script src="js/BootSideMenu.js"></script>              

HTML结构

该隐藏侧边栏特效使用嵌套<div>的结构:

  1. <div id="demo">

  2. <div class="list-group">

  3. <a href="#" class="list-group-item active">Item 1</a>

  4. <a href="#" class="list-group-item">Item 2</a>

  5. <a href="#" class="list-group-item">Item 3</a>

  6. <a href="#" class="list-group-item">Item 4</a>

  7. <a href="#" class="list-group-item">Item 5</a>

  8. ...

  9. </div>

  10. </div>      

初始化插件 

在页面加载完毕之后,通过下面的方法来初始化该隐藏侧边栏插件。 

  1. $('#demo').BootSideMenu();         

复制代码


配置参数 

默认的配置参数如下: 

  1. $('#demo').BootSideMenu({

  2. side:"left", // left or right

  3. autoClose:true // auto close when page loads

  4. });   

复制代码

  • side:侧边栏面板从屏幕的哪个方向滑出,可选:"left"和"right"。

  • autoClose:侧边栏面板在初始化时是否为隐藏状态。


下载地址:http://www.jqueryscript.net/menu/Sliding-Side-Menu-Panel-with-jQuery-Bootstrap-BootSideMenu.html

Copyright © 2014-2024 it689.com (京ICP备12032795号-2) 版权所有 Power by IT689