jQuery & CSS3 Sliding Menu Using Navigation Drawer - Drawer

File Size: 36.6 KB
Views Total: 75284
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery & CSS3 Sliding Menu Using Navigation Drawer - Drawer

Drawer is a jQuery plugin for creating a responsive, touch-enabled and animated side menu that slides out from the edge of the screen when clicking or touching the trigger. Similar to the draw navigation as you seen in Android App's.

How to use it:

1. Include the required jQuery library and cooker.css in the html document.

<link href="cooker.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

2. Include the jQuery drawer plugin's javascript and CSS after jQuery library.

<script src="cooker.drawer.js"></script>
<script src="cooker.drawer.css"></script>

3. Include the Bootstrap 3 framework for better experience.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

4. Create a toggle button and the menu items using unordered list.

<button class="drawer-toggle btn btn-outline-white">click or touch</button>
<div class="drawer drawer-default">
<nav class="drawer-nav" role="navigation">
<div class="drawer-brand"><a href="./">jQuery Drawer Plugin Demo</a> </div>
<ul class="nav drawer-nav-list">
<li><a href="https://www.jqueryscript.net/">Home</a></li>
<li><a href="https://www.jqueryscript.net/jquery-plugins/">Latest jQuery Plugins</a></li>
<li><a href="https://www.jqueryscript.net/popular/">Most Popular Plugins</a></li>
<li><a href="https://www.jqueryscript.net/recommended/">Recommended Plugins</a></li>
<li><a href="https://www.jqueryscript.net/blog/">Blog</a></li>
<li><a href="https://www.jqueryscript.net/submit/" rel="nofollow">Submit Plugins &amp; News</a></li>
</ul>
</nav>
</div>

5. Wrap your main content in the container with class of 'drawer-overlay'.

<div class="drawer-overlay">
Your main content goes here.
</div>

6. Call the plugin to initialize the navigation menu.

<script type="text/javascript">
$(document).ready(function() {
$('.drawer').drawer({
desktopEvent:'click'
});
});
</script>

7. Options and defaults.

<script type="text/javascript">
$(document).ready(function() {
$('.drawer').drawer({
nav: 'drawer-nav',
navList:     'drawer-nav-list',
overlay:     'drawer-overlay',
toggle:      'drawer-toggle',
openClass:   'drawer-open',
closeClass:  'drawer-close',
desktopEvent: 'mouseover', // or click 
speed: 200,
width: 280,
});
});
</script>

8. Available methods.

$('#element').drawer('open')

$('#element').drawer('close')

$('#element').drawer('toggle')

$('#element').drawer('resize')

$('#element').drawer('destroy')

About author:

Author: blivesta

Homepage: https://github.com/blivesta/drawer

Change logs:

v3.2.1 (2016-10-08)

  • Fix destroy method

v3.2.0 (2016-04-23)

v3.1.0 (2015-11-26)

  • update.

v2.4.0 (2015-03-16)

  • update.

v2.3.1 (2015-02-28)

  • update.

v2.3.0 (2015-01-25)

  • update.

v2.2.3 (2015-01-14)

  • update.

v2.2.2 (2015-01-02)

  • update.

v2.2.0 (2014-12-25)

  • update.

v2.1.0 (2014-12-15)

  • update.

2014-11-09

  • Fixed transitionEnd function

v2.0.0 (2014-10-12)

  • update.
  • remove iscroll

v1.5.1 (2014-05-28)

  • update.

 


This awesome jQuery plugin is developed by blivesta. For more Advanced Usages, please check the demo page or visit the official website.