2.2.11 • Published 2 years ago

@ymebrugts/mobile-swipe-menu-next v2.2.11

Weekly downloads
-
License
GPL-3.0
Repository
github
Last release
2 years ago

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

NameTypeDefaultDescription
modestringrightoperating mode (right, left)
widthnumber0menu width
hookWidthnumber30protrusion width
useHookWidthPercentagebooleanfalseuse percentage as hookWidth
breakpointWidthnumber30breakpoint width for activating menu
useBreakpointWidthPercentagebooleanfalseuse percentage as breakpointWidth
enableBodyHookbooleanfalsereact to the whole window
eventsobject{}event set object

Methods

NameDescription
openMenuopen the menu
closeMenuclose the menu
toggleMenuopen or close a menu
disableSwipedisable menu swipe
enableSwipeenable menu swipe

Events

NameDescription
startstarting swiping menu
stopstopping swiping menu
openedmenu is opened
closedmenu is closed
dragthe 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

2.2.11

2 years ago

2.2.7

2 years ago

2.2.9

2 years ago

2.2.10

2 years ago

2.2.8

2 years ago

2.2.6

3 years ago

2.2.5

3 years ago

2.2.4

3 years ago

2.2.3

3 years ago