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

 

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