Minimal Drawer Navigation Component With Pure JavaScript – tinyDrawer.js

Preview:

Description:

tinyDrawer.js is a small, zero-dependency drawer navigation component to slide in an off-screen menu from the left when toggled.

How to use it:

Load the core stylesheet in the document’s head section.

<link rel="stylesheet" href="assets/css/dist/core.min.css">

The HTML for the drawer navigation component.

<drawer-menu class="menu">
  Your Navigation Here
  <div data-drawer-close>Close</div>
</drawer-menu>

Insert a menu toggle button into the document.

<div data-drawer-open>Toggle Menu</div>

Load the minified version of the tinyDrawer.js library right before the closing body tag.

<script src="assets/js/tinyDrawer.min.js"></script>

Initialize the tinyDrawer component. Done.

TinyDrawer.init();

Execute a callback function when the drawer navigation is opened or closed.

TinyDrawer.init({
  callback: function(element, action) {
    console.log(element);
    console.log(action);
  }
});

Open & close the drawer navigation programmatically.

instance.open();
instance.close();

Changelog:

02/24/2019

• Fixed bug with open callback triggered by method.
• Added some ugly but useful tests in the html.