2.3.0 • Published 2 months ago

mobile-swipe-menu v2.3.0

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

Mobile Swipe Menu

Swipe Menu with Vanilla JS for mobile

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

Instruction

Installation

npm install mobile-swipe-menu --save

Using

new MobileSwipeMenu(selector, options)

Options

NameTypeDefaultDescription
modestringrightoperating mode (right, left)
widthnumber0menu width
hookWidthnumber30protrusion width
useHookWidthPercentagebooleanfalseuse percentage as hookWidth
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 'mobile-swipe-menu';
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: [
		'mobile-swipe-menu'
	]
};

For use in typescript

in src folder add file: "mobile-swipe-menu.d.ts" with the following contents:

declare module 'mobile-swipe-menu';

2.3.0

2 months ago

2.2.3

3 years ago

2.2.2

3 years ago

2.2.1

3 years ago

2.1.2

3 years ago

2.2.0

3 years ago

2.1.1

3 years ago

2.1.0

3 years ago

2.0.6

4 years ago

2.0.5

4 years ago

2.0.4

4 years ago

2.0.3

4 years ago

2.0.2

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago