Author: | felipoliveira |
---|---|
Views Total: | 1,818 views |
Official Page: | Go to website |
Last Update: | May 11, 2016 |
License: | MIT |
Preview:

Description:
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); });