Bootstrap 3 : 侧边菜单插件 Sliding Side Menu/Panel with jQuery and Bootstrap

这是一个使用jQuery和Bootstrap 3构建的轻量级侧边菜单/面板插件，它能平滑地从屏幕边缘滑出。如何使用：1. 在网页头部引入Bootstrap样式和脚本；2. 在页面底部加载jQuery库和Bootstrap的脚本；3. 创建侧边菜单的HTML结构；4. 调用插件并设置选项，创建从左侧滑出的菜单；5. 查看默认选项和更新日志。

A simple lightweight javascript plugin used to create side menus/panels that smoothly slide out from the edge of your screen when toggled, built with jQuery and Bootstrap 3.

How to use it:

1. Load the Bootstrap's stylesheet and BootSideMenu.css in the head section of the web page.

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

2. Load the jQuery library, Bootstrap's script and BootSideMenu.js at the bottom of the web page.

<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>

3. Create the Html for the side menu.

<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>

4. Call the plugin on the parent element and set the option to create a side menu that will slide out from the left hand side of your screen.

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

5. Default options.

$('#demo').BootSideMenu({
side:"left", // left or right
autoClose:true // auto close when page loads
});

Change logs:

2015-06-11

IE9 Fix

2015-06-04

IE9 Fix

下载: Sliding-Side-Menu-Panel-with-jQuery-Bootstrap-BootSideMenu

原文: http://www.jqueryscript.net/menu/Sliding-Side-Menu-Panel-with-jQuery-Bootstrap-BootSideMenu.html

本文: Bootstrap 3 : 侧边菜单插件 Sliding Side Menu/Panel with jQuery and Bootstrap - BootSideMenu