Simple Multi-level Off-canvas Menu Plugin With jQuery - Essence Drawermenu

File Size: 16.7 KB
Views Total: 4374
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple Multi-level Off-canvas Menu Plugin With jQuery - Essence Drawermenu

Essence Drawermenu is a tiny jQuery plugin used to create an multiple-level, drawer-style off-canvas navigation menu for your responsive, cross-platform website. This plugin is made using SVG and Stylus. So, customization such as color can be easily done with CSS.

How to use it:

1. Load the following JavaScript and CSS files into your html document:

<script src="//"></script>
<script src=""></script>
<link rel="stylesheet" href="">

2. Code the navigation bar which contains a SVG based menu toggle icon.

<header class="navbar">
  <div class="menu-left">
    <svg version="1.1" class="hamburger drawer-toggle" id="hamburger" xmlns="" xmlns:xlink="" x="0px"
   y="0px" viewBox="0 0 302 212.9" style="enable-background:new 0 0 302 212.9;" xml:space="preserve">
      <g><rect width="302" height="26.3" /></g>
      <g><rect y="93.3" width="302" height="26.3"/></g>
      <g><rect y="186.7" width="302" height="26.3"/></g>
  <div class="menu-right"></div>

3. Create the multi-level drawer menu from a nested nav list.

<nav class="drawermenu">
    <li><a href="#">Home</a></li>
      <a href="#">Categories</a>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">HTML5</a></li>
        <li><a href="#">CSS/CSS3</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>

4. Create an overlay element for the menu:

<div class="drawermenu-overlay"></div>

5. Then setup the plugin and done.


  // change the speed of the drawer

  // If position: right, draw from the right

Change log:


  • v1.0.4

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