Animated Side Sliding Drawer Menu Plugin with jQuery - Drawer Menu
File Size: | 12.5 KB |
---|---|
Views Total: | 4331 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Drawer Menu is a jQuery plugin for creating sidebar panels containing multi-level sliding menus that pull out from the left or right side of the webpage, with jQuery animations and easing effects.
How to use it:
1. Include the jQuery javascript library and the jQuery drawer menu plugin in the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.drawer-menu.js"></script>
2. Create html elements to toggle a navigation panel with a multi-level drawer menu.
<input type="button" onclick="$.drawer_menu.toggle('#drawer-menu')" value="menu" /> <input type="button" onclick="$.drawer_menu.child('#drawer-menu_01')" value="sub-menu1" /> <input type="button" onclick="$.drawer_menu.child('#drawer-menu_02')" value="sub-menu2" /> <input type="button" onclick="$.drawer_menu.child('#drawer-menu_03')" value="sub-menu3" />
3. Create the Html for the multi-level drawer menu.
<div class="drawer-menu-panels" id="drawer-menu"> <div class="drawer-menu-panel" id="drawer-menu_01" name="panel_sub01" > <div class="panel_inner"> ... </div> </div> <div class="drawer-menu-panel" id="drawer-menu_02" name="panel_sub02" > <div class="panel_inner"> ... </div> </div> <div class="drawer-menu-panel" id="drawer-menu_03" name="panel_sub03" data-drawer_menu-closeTo='#drawer-menu_01'> <div class="panel_inner"> ... </div> </div> </div>
4. The required CSS styles.
.drawer-menu-body { position : absolute; width: 100%; height: 100%; } .drawer-menu-page { position: absolute; width: 100%; height: 100%; } .drawer-menu-panels { position: absolute; display: none; width: 100%; height: 100%; top: 0; overflow : auto; } .drawer-menu-panel { position: absolute; display: none; width: 100%; height: 100%; top: 0; }
5. Initialize the drawer menu with default options.
$('#drawer-menu').drawer_menu();
6. Default options and callbacks.
body : '.drawer-menu-body:first', speed : 500, easing : 'linear', side : 'left', children : '.drawer-menu-panel', child_speed : 500, child_easing : 'linear', child_side : 'left', width : '80%', displace : true, tapToClose : '.drawer-menu-page', resizeToClose : false, resizePer : false, cssAnimation : false, beforeOpen : function () {}, afterOpen : function () {}, afterOpenAnimation : function(){}, beforeClose : function () {}, afterClose : function () {}, afterCloseAnimation : function(){},
Change log:
2014-10-08
- fixed a bug.
This awesome jQuery plugin is developed by coosydev. For more Advanced Usages, please check the demo page or visit the official website.