Mobile Swipe Menu
Swipe Menu with Vanilla JS for mobile
https://milkamil93.github.io/
Demo:Instruction
Installation
-
npm install @ymebrugts/mobile-swipe-menu-next --save
Using
new MobileSwipeMenu(selector, options)
Options
Name | Type | Default | Description |
---|---|---|---|
mode |
string | right | operating mode (right, left) |
width |
number | 0 | menu width |
hookWidth |
number | 30 | protrusion width |
useHookWidthPercentage |
boolean | false | use percentage as hookWidth |
breakpointWidth |
number | 30 | breakpoint width for activating menu |
useBreakpointWidthPercentage |
boolean | false | use percentage as breakpointWidth |
enableBodyHook |
boolean | false | react to the whole window |
events |
object | {} | event set object |
Methods
Name | Description |
---|---|
openMenu |
open the menu |
closeMenu |
close the menu |
toggleMenu |
open or close a menu |
disableSwipe |
disable menu swipe |
enableSwipe |
enable menu swipe |
Events
Name | Description |
---|---|
start |
starting swiping menu |
stop |
stopping swiping menu |
opened |
menu is opened |
closed |
menu is closed |
drag |
the menu is swiping |
Example
ES6
import MobileSwipeMenu from '@ymebrugts/mobile-swipe-menu-next';
new MobileSwipeMenu('#menu', {
mode: 'right',
width: window.innerWidth / 1.15
});
OR
<script src="js/mobile-swipe-menu.min.js"></script>
<script>
var mobileMenu = new MobileSwipeMenu('#menu', {
mode: 'right',
width: window.innerWidth / 1.15,
enableBodyHook: true,
events: {
opened: function () {
},
closed: function () {
},
drag: function (swipe) {
}
}
});
document.getElementById('openMenu').addEventListener('click', function () {
mobileMenu.openMenu();
});
document.getElementById('closeMenu').addEventListener('click', function () {
mobileMenu.closeMenu();
});
document.getElementById('toggleMenu').addEventListener('click', function () {
mobileMenu.toggleMenu();
});
</script>
For use in Vue
This library will work with any front-end library.
The library will have to be transpiled using babel so add the following into the vue.config.js
module.exports = {
transpileDependencies: [
'@ymebrugts/mobile-swipe-menu-next'
]
};
For use in typescript
in src folder add file: "mobile-swipe-menu.d.ts" with the following contents:
declare module '@ymebrugts/mobile-swipe-menu-next';
Changelog
2.2.12
Only trigger listener on the hook width not the whole menu
2.2.11
Fix undefined issue with hookCliced Event
2.2.9 and 2.2.10
Added hookClicked event
2.2.8
Fix Readme
2.2.7
Added ability to setWindow width from function to allow a listenet on windowwidth to enable resizing the screen without breaking the menu
window.onresize = (event: any) => {
mobileMenu.setWidth(window.innerWidth / 1.15);
mobileMenu.setWindowWidth();
};
2.2.6
Add useHookWidthPercentage option Add breakpoint drag distance for activating opening or closing of menu