Sliding Drawer Navigation with JavaScript and CSS3

A JavaScript based drawer navigation that slides out from the left side of the webpage with a CSS3 based animation when toggled, similar to the famous app off-canvas menu.

How to use it:

Load the required stylesheet files in the head section of your web page.

<link rel="stylesheet" href="dd-menu.css">
<link rel="stylesheet" href="dd-menu-items.css">
<link rel="stylesheet" href="theme-standard.css">

Create a menu toggle button.

<button id="open-menu">Open Menu</button>

Create the html for the sliding drawer menu.

<div id="dd-menu" class="dd-menu level-1" data-button="#open-menu">
  <div class="dd-menu-header">
    <button class="dd-menu-prev">&larr;</button>
    <a class="dd-menu-title">Menu</a>
    <button class="dd-menu-close">&times;</button>
  </div>
  <div class="dd-menu-items">
    <div class="dd-menu-item link"><a href="#">Item One</a></div>
    <div class="dd-menu-item link"><a href="#" data-submenu="submenu-one">Item Two</a></div>
    <div class="dd-menu-item link"><a href="#">Item Three</a></div>
    <div class="dd-menu-item link"><a href="#">Item Four</a></div>
  </div>
  <div id="submenu-one" class="dd-menu-items submenu">
    <div class="dd-menu-item link"><a href="#">Sub Menu Item One</a></div>
    <div class="dd-menu-item link"><a href="#">Sub Menu Item Two</a></div>
    <div class="dd-menu-item link"><a href="#">Sub Menu Item Three</a></div>
  </div>
</div>

Load the JavaScript files at the bottom of the webpage.

<script src="dd-menu.js"></script>
<script src="dd-menu-items.js"></script>

Initialize the sliding drawer menu.

(function() {
  var mainMenu = getDDMenu(document.querySelector('#dd-menu'), {
    effect: 'slideFromLeft' // or slideFromRight
  });
  var mainMenuItems = new DDMenuItems(mainMenu);
})();