Mobile-first Drawer Navigation In Vanilla JavaScript - hy-drawer

Authorqwtel

Last UpdateOctober 11, 2018

LicenseMIT

How to use it:

In this post, we’re going to implement the hy-drawer in vanilla JavaScript. For jQuery users, visit jQuery hy-drawer.

<link href="dist/style.css" rel="stylesheet">
<script src="dist/hy-drawer.js"></script>

Code the drawer navigation as these.

<aside id="drawerEl">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">CSS Script</a></li>
    <li><a href="#">Works</a></li>
    <li><a href="#">Portfolios</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</aside>

You might need a trigger element to toggle the drawer navigation.

<a id="menuEl" href="#drawerEl"><span class="sr-only">Menu</span></a>

The JavaScript to activate the drawer navigation and trigger element.

var Drawer = hyDrawer.Drawer;
window.drawer = new Drawer(window.drawerEl, {
  // options here
});
window.menuEl.addEventListener('click', function (e) {
  e.preventDefault();
  window.drawer.toggle();
});

Configuration options available:

window.drawer = new Drawer(window.drawerEl, {
  // is opened on page load?
  opened: false,
  // alignment of the drawer navigation
  // left, right
  align: 'left',
  // the range in pixels from either left or right side of the screen (depending on alignment) from within which the drawer can be drawn
  range: [0, 100],
  // is in 'persistent' state?
  // true = drawer can't be moved with touch events
  persistent: false,
  // true = call preventDefault on every (touch-)move event, effectively preventing scrolling while sliding the drawer
  preventDefault: false,
  // in pixels
  threshold: 10,
  // allows the drawer to be pulled with the mouse
  mouseEvents: false
  
});

API methods.

// toggle the drawer navigation
window.drawer.toggle();
// open the drawer navigation
window.drawer.open();
// close the drawer navigation
window.drawer.close();

Events.

window.drawerEl.addEventListener('hy-drawer-init', function (e) {
  // Fired after the component has been initialized. 
  // The current opened state is provided in the detail field of the event.
});
window.drawerEl.addEventListener('hy-drawer-slidestart', function (e) {
  // Fired when the user starts sliding the drawer. 
  // Note that this event does not occur on every touch motion, since the user could also be scrolling the page!
});
window.drawerEl.addEventListener('hy-drawer-slideend', function (e) {
  // Fired when the user stops sliding the drawer.
  // For example, it is always proceeded by a slidestart event. 
  // However, it is fired before the drawer starts transitioning towards the next opened state.
  // The next opened state is provided in the detail field of the event.
});
window.drawerEl.addEventListener('hy-drawer-transitioned', function (e) {
  // Fired after a completed transitioning to the new opened state. 
  // The new opened state is provided in the detail field of the event.
});