How To Create an Off-Canvas Menu For Mobile | Swipe Menu

Off-Canvas Menu – Mobile navigation first from outside the canvas enables the user to reveal and hide the side menu by tapping the toggle button or by swiping the screen.

How to make use of 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)">Home</a></li>
            <li><a href="javascript:void(0)">Web</a></li>
            <li><a href="javascript:void(0)">Code</a></li>
            <li><a href="javascript:void(0)">Flow</a></li>
            <li><a href="javascript:void(0)">Com</a></li>
            <li><a href="javascript:void(0)">Web Code</a></li>
            <li><a href="javascript:void(0)">jQuery Code</a></li>
            <li><a href="javascript:void(0)">HTML 5</a></li>
            <li><a href="javascript:void(0)">PHP</a></li>
            <li><a href="javascript:void(0)">Contact</a></li>
            <li><a href="javascript:void(0)">Item menu</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 within the doc.

<script src="js/mobile-swipe-menu.js"></script>

5. Initialize the Mobile Swipe Menu and completed it.

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 deal.

var mobileMenu = new mobileSwipeMenu('#menu', {
    hookWidth: 15
});

8. Make the off-canvas navigation slide out from the left instead of the 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 strategies.

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

Swipeable Off-canvas Navigation For Mobile, off-canvas mobile menu, responsive off-canvas menu with submenu, Mobile Swipe Menu Plugin/Github


See Demo And Download

Official Website(milkamil93): Click Here

This superior jQuery/javascript plugin is developed by milkamil93. For extra Advanced Usage, please go to the official website.

Share