Bootstrap Sidebar Extension With jQuery And CSS / CSS3
File Size: | 3.45 KB |
---|---|
Views Total: | 12098 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A jQuery & CSS extension that creates a CSS3 animated, toggleable off-canvas sidebar for your Bootstrap based webpages. Useful for creating an off-canvas side navigation for your Bootstrap web project.
How to use it:
1. Make sure you first have jQuery library and Twitter's Bootstrap framework installed.
<!-- Bootstrap Core CSS --> <link href="/path/to/bootstrap.min.css" rel="stylesheet"> <!-- jQuery --> <script src="/path/to/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="/path/to/bootstrap.min.js"></script>
2. Put the style sheet simple-sidebar.css
in the head section of your webpage.
<link href="simple-sidebar.css" rel="stylesheet">
3. Create a sidebar navigation as follows:
<div id="sidebar-wrapper"> <ul class="sidebar-nav nav nav-tabs" id="sidebar-nav"> <li class="sidebar-brand"> <a href="#"> Sidebar With Bootstrap </a> </li> <li class="active"> <a href="#dashboard">Dashboard</a> </li> ... </ul> </div>
4. Create a button to toggle the sidebar navigation.
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
5. Wrap the sidebar navigation and your main content into a container element.
<div id="wrapper"> <!-- Sidebar --> <!-- Page Content --> </div>
6. The jQuery script to show/hide the sidebar navigation by toggling CSS classes.
$("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); });
This awesome jQuery plugin is developed by gautampanday. For more Advanced Usages, please check the demo page or visit the official website.