Swipeable Off-canvas Navigation For Mobile – Mobile Swipe Menu

Category: Javascript , Menu & Navigation | October 3, 2020
Author: milkamil93
Views Total: 219 views
Official Page: Go to website
Last Update: October 3, 2020
License: MIT

Preview:

Swipeable Off-canvas Navigation For Mobile – Mobile Swipe Menu

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

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
});

8. Make the off-canvas navigation slide out from the left instead of right.

var mobileMenu = new mobileSwipeMenu('#menu', {
    mode: 'left'
});

9. Event handlers.

var mobileMenu = new mobileSwipeMenu('#menu', {
    events: {
      opening: function () {
        console.log(this, 'Opened');
      },
      closing: function () {
        console.log(this, 'Closed');
      },
      drag: function (swipe) {
        console.log(this, swipe);
      }
    }
});

10. API methods.

mobileMenu.open();
mobileMenu.close();
mobileMenu.toggle();

Changelog:

v2.0.6 (10/03/2020)

  • Updated

You Might Be Interested In:


Leave a Reply