Author: | milkamil93 |
---|---|
Views Total: | 2,001 views |
Official Page: | Go to website |
Last Update: | October 6, 2021 |
License: | MIT |
Preview:

Description:
A mobile-first off-canvas navigation that enables the user to reveal and hide the side menu by clicking the toggle button or by swiping the screen.
How to use it:
1. Install & download the Mobile Swipe Menu.
# NPM $ npm i mobile-swipe-menu --save import MobileSwipeMenu from 'mobile-swipe-menu';
2. Code the HTML for the off-canvas navigation menu.
<div id="menu"> <div id="closeMenu">Close menu</div> <div class="wrapper"> <ul> <li><a href="javascript:void(0)">Item 1</a></li> <li><a href="javascript:void(0)">Item 2</a></li> <li><a href="javascript:void(0)">Item 3</a></li> ... </ul> </div> </div>
3. The basic CSS for the off-canvas navigation menu.
#menu { background-color: #ccc; } #menu > div:not(.wrapper) { background-color: #eee; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .wrapper { width: 100%; height: 100%; overflow-y: auto; position: relative; -webkit-overflow-scrolling: touch; }
4. Load the main JavaScript mobile-swipe-menu.js
in the document.
<script src="js/mobile-swipe-menu.js"></script>
5. Initialize the Mobile Swipe Menu and done.
var mobileMenu = new mobileSwipeMenu('#menu', { // options here });
6. Determine the width of the off-canvas navigation.
var mobileMenu = new mobileSwipeMenu('#menu', { width: 300 });
7. Determine the width of the swipe handle. Default: 30.
var mobileMenu = new mobileSwipeMenu('#menu', { hookWidth: 15, useHookWidthPercentage: false, });
8. Make the off-canvas navigation slide out from the left instead of right.
var mobileMenu = new mobileSwipeMenu('#menu', { mode: 'left' });
9. Determine whether to react to the whole window. Default: false.
var mobileMenu = new mobileSwipeMenu('#menu', { enableBodyHook: true, });
10. Event handlers.
var mobileMenu = new mobileSwipeMenu('#menu', { events: { opened: function () { console.log(this, 'Opened'); }, closed: function () { console.log(this, 'Closed'); }, drag: function (swipe) { console.log(this, swipe); }, start: function () { // start }, stop: function () { // stop } } });
10. API methods.
mobileMenu.openMenu(); mobileMenu.closeMenu(); mobileMenu.toggleMenu(); mobileMenu.enableSwipe(); mobileMenu.disableSwipe();
Changelog:
v2.2.3 (10/06/2021)
- Add useHookWidthPercentage option
v2.2.1 (08/29/2021)
- Add “will-change: transform”
v2.1.1 (07/30/2021)
- Hot fix
v2.1.0 (02/20/2020)
- Updated
v2.0.6 (10/03/2020)
- Updated