Swipeable Off-canvas Navigation For Mobile – Mobile Swipe Menu

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.3.0 (03/07/2024)

• Bugfix

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