Mobile Touch Menu
Installation
npm install mobile-touch-menu --save
or
yarn add mobile-touch-menu
Using
<button class="mobile-touch-menu-toggler">...</button>
<nav class="mobile-touch-menu">...</nav>
<script>new MobileTouchMenu(options)</script>
Options
| Name |
Type |
Default |
Description |
direction |
string |
left |
operating mode (right, left) |
width |
string |
280px |
menu width (with px or %) |
swipeDistance |
number |
120 |
swipe distance to close the menu |
transitionDuration |
number |
300 |
how long the animation will run (milliseconds) |
Methods
| Name |
Description |
show |
open the menu |
hide |
close the menu |
Example
<link rel="stylesheet" href="mobile-touch-menu.css">
...
<button class="mobile-touch-menu-toggler">Toggle Menu</button>
...
<nav class="mobile-touch-menu">
<ul>
<li><a href="#">Menu Item #1</a></li>
<li><a href="#">Menu Item #2</a></li>
<li><a href="#">Menu Item #3</a></li>
<li><a href="#">Menu Item #4</a></li>
<li><a href="#">Menu Item #5</a></li>
<li><a href="#">Menu Item #6</a></li>
<li><a href="#">Menu Item #7</a></li>
<li><a href="#">Menu Item #8</a></li>
<li><a href="#">Menu Item #9</a></li>
</ul>
</nav>
...
<script src="js/mobile-touch-menu.js"></script>
<script>
var mobileTouchMenu = new MobileTouchMenu({
width: '280px',
direction: 'right',
swipeDistance: 120,
transitionDuration: 500
});
document.getElementById('openMenu').addEventListener('click', function () {
mobileTouchMenu.show();
});
document.getElementById('closeMenu').addEventListener('click', function () {
mobileTouchMenu.hide();
});
</script>
ES6
import MobileTouchMenu from 'mobile-touch-menu';
import 'mobile-touch-menu/mobile-touch-menu.css';
new MobileTouchMenu({
width: '280px',
direction: 'left',
swipeDistance: 120
});
