Flexible Off-canvas Side Panel Plugin - Simpler Sidebar

File Size: | 14.2 KB |
---|---|
Views Total: | 1082 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple, flexible sidebar jQuery plugin to create mobile app-style off-canvas panels for side menus, drawer navigation, and any other panel types such as notifications, settings, social sharing widgets, and more.
How to use it:
1. Insert your content (like menu items, social icons, etc) into the sidebar panel.
<div class="sidebar" id="sidebar-left"> <div class="sidebar-wrapper"> Any Element Here </div> </div>
2. Add a sidebar panel toggle button to your navbar.
<!--div.appbar--> <div class="appbar"> <div class="appbar-item appbar-menu-icon" id="toggle-sidebar-left"> <img src="./static/images/icon-menu-24px-x2.png" width="24px" alt="Menu Icon" /> </div> <div class="appbar-item appbar-title"> <h6>Simpler Sidebar</h6> </div> </div> <!--div.appbar-offset--> <div class="appbar-offset"></div>
3. The example CSS for the sidebar panel.
.appbar { position: absolute; top: 0; right: 0; left: 0; height: 56px; display: flex; align-content: space-between; background-color: lightseagreen; align-items: center; line-height: 0; padding: 0 4px; color: #212121; } .appbar-item.appbar-menu-icon { padding: 8px; cursor: pointer; } .appbar-item.appbar-title { margin-left: 8px; } .appbar-item.appbar-title h6 { font-size: inherit; font-weight: normal; } .appbar-offset { display: block; height: 56px; } .sidebar { background-color: blueviolet; } .sidebar-wrapper { overflow-y: auto; padding: 0 8px; }
4. Load the minified version of the jQuery Simpler Sidebar plugin in the document.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/lib/simpler-sidebar.min.js"></script>
5. Initialize the sidebar panel and done.
$("#sidebar-left").simplerSidebar({ align: "left", // default: 'right' selectors: { trigger: "#toggle-sidebar-left", quitter: ".quit-sidebar-left" } });
6. Customize the background overlay.
$("#sidebar-left").simplerSidebar({ mask: { display: true, css: { backgroundColor: "black", opacity: 0.5, filter: "Alpha(opacity=50)", } } });
7. Customize the open/close animations.
$("#sidebar-left").simplerSidebar({ animation: { duration: 500, easing: "swing" } });
8. Specify the width of the sidebar panel.
$("#sidebar-left").simplerSidebar({ sidebar: { width: 300, } });
9. Event handlers.
$("#sidebar-left").simplerSidebar({ events: { on: { animation: { open: function () {}, close: function () {}, both: function () {}, }, }, callbacks: { animation: { open: function () {}, close: function () {}, both: function () {}, freezePage: true, }, }, } });
10. More default configurations.
$("#sidebar-left").simplerSidebar({ attr: "simplersidebar", top: 0, gap: 64, zIndex: 3000 });
This awesome jQuery plugin is developed by ctrlmaniac. For more Advanced Usages, please check the demo page or visit the official website.