Bootstrap隐藏滑动侧边栏jQuery插件

 BootSideMenu是一款基于Bootstrap的jQuery隐藏滑动侧边栏特效插件。该隐藏滑动侧边栏基于Bootstrap 3制作,简单实用。菜单面板可以从屏幕的左侧或右侧进行隐藏显示。CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

 CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

 CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

使用方法CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

使用这个隐藏侧边栏插件要引入jQuery和BootSideMenu.js、BootSideMenu.css文件以及所需要的Bootstrap文件。CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

 CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  1. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  2. <link rel="stylesheet" href="css/BootSideMenu.css">CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  3. <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  4. <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  5. <script src="js/BootSideMenu.js"></script>              
复制代码

 CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

HTML结构CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

该隐藏侧边栏特效使用嵌套<div>的结构:CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

 CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  1. <div id="demo">CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  2. <div class="list-group">CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  3. <a href="#" class="list-group-item active">Item 1</a>CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  4. <a href="#" class="list-group-item">Item 2</a>CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  5. <a href="#" class="list-group-item">Item 3</a>CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  6. <a href="#" class="list-group-item">Item 4</a>CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  7. <a href="#" class="list-group-item">Item 5</a>CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  8. ...CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  9. </div>CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  10. </div>      
复制代码

CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站
初始化插件 CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站
CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

在页面加载完毕之后,通过下面的方法来初始化该隐藏侧边栏插件。 CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站
CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  1. $('#demo').BootSideMenu();         
复制代码

CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站
配置参数 CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站
CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

默认的配置参数如下: CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站
CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  1. $('#demo').BootSideMenu({CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  2. side:"left", // left or rightCbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  3. autoClose:true // auto close when page loadsCbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  4. });   
复制代码

 CbN迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

  •  side:侧边栏面板从屏幕的哪个方向滑出,可选:"left"和"right"。
  •  autoClose:侧边栏面板在初始化时是否为隐藏状态。
  •  

扫一扫手机访问