Touch-compatible Off-canvas Menu – SwipeMenu

SwipeMenu is a really small JavaScript library for creating an off-canvas side menu that supports touch swipe events. No 3rd dependencies required. Click / tap on the trigger button or swipe the screen to toggle the menu.

How to use it:

Load the style sheet swipemenu.css in the head section to style the off-canvas menu.

<link rel="stylesheet" href="dist/swipemenu.css">

Load the JavaScript library at the end of the document to reduce the page load time.

<script src="dist/swipemenu.js"></script>

The html for the off-canvas menu.

<div id="menu" class="menu">
  <div class="menuLista">
      <h3 class="menuLista__title">Options</h3>
      <nav class="menuLista__nav">
          <a href="#a"><span>Item A</span></a>
          <a href="#b"><span>Item B</span></a>
          <a href="#c"><span>Item C</span></a>
      </nav>
  </div>
</div>

Create a trigger button to toggle the off-canvas menu manually.

<main>
  <h1 id="hamburguer" class="hamburguer" data-method="add">☰</h1>
</main>

The JavaScript to active the off-canvas menu.

var swipeMenu = new SwipeMenu('#menu');
var hamburguer = document.querySelector('#hamburguer');
var obfuscator = document.querySelector('#obfuscator');
function onToggle(event, method) {
    var m = event ? event.currentTarget.dataset.method : method || 'remove';
    swipeMenu.menu.classList[m]('menu--open');
    obfuscator.classList[m]('obfuscator--visible');
}
hamburguer.addEventListener('click', onToggle);
obfuscator.addEventListener('click', onToggle);
swipeMenu.ee.on('trigger', function(method) {
    onToggle(null, method);
});