Minimal Drawer Navigation Component With Pure JavaScript – tinyDrawer.js

Category: Javascript , Menu & Navigation | November 24, 2018
Author: jenstornell
Views Total: 347
Official Page: Go to website
Last Update: November 24, 2018
License: MIT

Preview:

Minimal Drawer Navigation Component With Pure JavaScript – tinyDrawer.js

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:

11/24/2018

  • v1.3

You Might Be Interested In:

Leave a Reply