Bootstrap隐藏滑动侧边栏jQuery插件

当前位置:主页 > jQuery库 > 菜单和导航 > Bootstrap隐藏滑动侧边栏jQuery插件
Bootstrap隐藏滑动侧边栏jQuery插件
分享:

    插件介绍

    BootSideMenu是一款基于Bootstrap的jQuery隐藏滑动侧边栏特效插件。该隐藏滑动侧边栏基于Bootstrap 3制作,简单实用。菜单面板可以从屏幕的左侧或右侧进行隐藏显示。

    浏览器兼容性

    浏览器兼容性
    时间:2015-05-13
    阅读:
简要教程

BootSideMenu是一款基于Bootstrap的jQuery隐藏滑动侧边栏特效插件。该隐藏滑动侧边栏基于Bootstrap 3制作,简单实用。菜单面板可以从屏幕的左侧或右侧进行隐藏显示。

使用方法

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

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/BootSideMenu.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="js/BootSideMenu.js"></script>              
              
HTML结构

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

<div id="demo">
  <div class="list-group">
    <a href="#" class="list-group-item active">Item 1</a>
    <a href="#" class="list-group-item">Item 2</a>
    <a href="#" class="list-group-item">Item 3</a>
    <a href="#" class="list-group-item">Item 4</a>
    <a href="#" class="list-group-item">Item 5</a>
    ...
  </div>
</div>               
              
初始化插件

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

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

配置参数

默认的配置参数如下:

$('#demo').BootSideMenu({
  side:"left", // left or right
  autoClose:true // auto close when page loads
});                
              
  • side:侧边栏面板从屏幕的哪个方向滑出,可选:"left"和"right"。
  • autoClose:侧边栏面板在初始化时是否为隐藏状态。