Generic Sliding Push Drawer Plugin For jQuery - slideNav
File Size: | 36.8 KB |
---|---|
Views Total: | 1985 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

slideNav is a simple, mobile-friendly side drawer plugin for easily creating off-canvas push menus, navigations, and any other panel types such as shopping carts, admin panels, etc.
How to use it:
1. Create the left and/or right drawer menus for a specific container as follows:
<div class="slidenav" id="slidenav-demo"> <div class="slidenav-wrap"> <!-- Main Content --> <h4>Main Content Goes Here</h4> ... More Content Goes Here ... <!-- Left menu --> <div class="slidenav-menu-left"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a> <ul> <li><a href="#">Link 3.1</a></li> <li><a href="#">Link 3.2</a> <ul> <li><a href="#">Link 3.2.1</a></li> <li><a href="#">Link 3.2.2</a></li> </ul> </li> </ul> </li> </ul> </div> <!-- Right menu --> <div class="slidenav-menu-right"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a> <ul> <li><a href="#">Link 3.1</a></li> <li><a href="#">Link 3.2</a> <ul> <li><a href="#">Link 3.2.1</a></li> <li><a href="#">Link 3.2.2</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </div>
2. Create the toggle links to open/close the drawer menus:
<a href="#slidenav-demo" data-slidenav-menu="right">Toggle right nav</a> <a href="#slidenav-demo" data-slidenav-menu="left">Toggle left nav</a>
3. The necessary CSS for the drawer menus. Copy and paste the following CSS styles into your webpage or existing CSS file.
.left { float: left; } .right { float: right; } .slidenav { overflow-x: hidden; } .slidenav-wrap { position: relative; padding-top: 1px; left: 0; } [class^="slidenav-menu-"], [class*=" slidenav-menu-"] { position: absolute; top: 0; right: -250px; bottom: 0; z-index: 100; overflow-x: hidden; width: 250px; background-color: #eee; } [class^="slidenav-menu-"]:before, [class^="slidenav-menu-"]:after, [class*=" slidenav-menu-"]:before, [class*=" slidenav-menu-"]:after { content: " "; display: table; } [class^="slidenav-menu-"]:after, [class*=" slidenav-menu-"]:after { clear: both } .slidenav-menu-right { right: -250px; } .slidenav-menu-left { left: -250px; } .slidenav-tierwrap { position: absolute; top: 0; left: 0; width: 250px; } .slidenav-tier { float: left; width: 250px; } .slidenav-tierlink { background-color: #E5E5E5; } .slidenav-tier > .slidenav-tierlink { background-color: #d5d5d5; } .slidenav-menu-right ul ul, .slidenav-menu-left ul ul { display: none; } .slidenav-menu-right ul, .slidenav-menu-left ul { list-style-type: none; margin: 0; padding: 0; } .slidenav-menu-right ul li, .slidenav-menu-left ul li, .slidenav-tier > a { border-bottom: 1px solid #ccc; } .slidenav-menu-right ul a, .slidenav-menu-left ul a, .slidenav-tier > a, .slidenav-back { display: block; padding: 7px 15px; }
4. Load jQuery library and the jQuery slideNav plugin at the bottom of the html page.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery-slidenav.js"></script>
5. Initialize the plugin and done.
var mySlideNav = new $.slidenav("#slidenav-demo");
6. Event handlers:
var mySlideNav = new $.slidenav("#slidenav-demo",{ onOpen: null, onOpenEnd: null, onClose: null, onCloseEnd: null });
7. Or...
$("#slidenav-demo").on("onOpen", function (e) { console.log("Opening"); }); $("#slidenav-demo").on("onOpenEnd", function (e) { console.log("Open"); }); $("#slidenav-demo").on("onClose", function (e) { console.log("Closing"); }); $("#slidenav-demo").on("onCloseEnd", function (e) { console.log("Closed"); });
This awesome jQuery plugin is developed by florianbar. For more Advanced Usages, please check the demo page or visit the official website.