Mobile Swipe Menu

Swipe Menu with Vanilla JS for mobile

Demo: https://milkamil93.github.io/

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.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