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

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="//">
<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="//"></script>
<script src="//"></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>

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.


5. Default options.

side:"left", // left or right
autoClose:true // auto close when page loads

Change logs:


  • IE9 Fix


  • IE9 Fix


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


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


Add a Comment

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.