Mobile-Friendly jQuery Off-canvas Sidebar Plugin - ElOffsetSidebar
File Size: | 6.85 KB |
---|---|
Views Total: | 803 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.