Mobile-Friendly jQuery Off-canvas Sidebar Plugin - ElOffsetSidebar

ElOffsetSidebar is a jQuery plugin to create a responsive & mobile-aware sidebar that allows you to toggle off-canvas sidebar on small screen devices.

How to use it:

1. Include jQuery javascript library and the jQuery ElOffsetSidebar plugin at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript" src="el-offsidebar.js"></script> 

2. Create an DOM element that will be serve as a off-canvas sidebar container.

<div id="el-sidebar-nav"></div>

3. Wrap the real sidebar, main content and sidebar toggle button in a wrapper element.

<div id="el-wrapper">

... Main content goes here ... 

<!-- EL-Offset Sidebar Button -->
<p class="visible-xs"> <a class="btn btn-success el-sidebar-btn"><span class="fa fa-chevron-right fa-lg"></span></a> </p>

... Main content goes here ... 

<div class="blog-sidebar"> 

<!-- EL-Offset Sidebar Button -->
<p class="visible-xs"> <a class="btn btn-success  el-sidebar-btn"><span class="fa fa-chevron-left fa-lg"></span></a> </p>

... Sidebar content goes here ... 

</div>
</div>

4. Initialize the plugin

<script>
// init ElOffsetSidebar
$.fn.elSidebar({
sidebar: '.blog-sidebar',// real sidebar
sidebarBtn: '.el-sidebar-btn',// show/hide sidebar button
elSidebar: '#el-sidebar-nav',// el sidebar
elWrapper: '#el-wrapper'// el wrapper
});
</script>

---

This awesome jQuery plugin is developed by ugputu. For more Advanced Usages, please check the demo page or visit the official website.