Touch-compatible Off-canvas Menu – SwipeMenu

Category: Javascript , Menu & Navigation | May 11, 2016
Views Total:1,932 views
Official Page:Go to website
Last Update:May 11, 2016


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>

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

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

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';[m]('menu--open');
hamburguer.addEventListener('click', onToggle);
obfuscator.addEventListener('click', onToggle);'trigger', function(method) {
    onToggle(null, method);

You Might Be Interested In:

Leave a Reply