Animated Side Sliding Drawer Menu Plugin with jQuery - Drawer Menu

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.