Swipe Menu with Vanilla JS for mobile
npm i mobile-swipe-menu --save
new MobileSwipeMenu(selector, options)
mode - operating mode (right, left)
width - menu width
hookWidth - protrusion width
enableBodyHook - react to the whole window
parentWidth
open, close, toggle
events: {
opening: function () {},
closing: function () {},
drag: function (swipe) {}
}
import MobileSwipeMenu from 'mobile-swipe-menu';
new MobileSwipeMenu('#menu', {
mode: 'right',
width: window.innerWidth / 1.15
});
<script src="js/mobile-swipe-menu.min.js"></script>
<script>
var mobileMenu = new MobileSwipeMenu('#menu', {
mode: 'right',
width: window.innerWidth / 1.15,
hookWidth: 15,
events: {
opening: function () {
console.log(this, 'Opened');
},
closing: function () {
console.log(this, 'Closed');
},
drag: function (swipe) {
console.log(this, swipe);
}
}
});
document.getElementById('openMenu').addEventListener('click', function () {
mobileMenu.open();
});
document.getElementById('closeMenu').addEventListener('click', function () {
mobileMenu.close();
});
document.getElementById('toggleMenu').addEventListener('click', function () {
mobileMenu.toggle();
});
</script>
Author: milkamil93
Demo: https://milkamil93.github.io/
Source Code: https://github.com/milkamil93/mobile-swipe-menu
#javascript #css