下载:20130709125708248 原文:jquery ui仿腾讯web qq界面desktop酷炫特效
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="//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