Mobile-friendly Swipe Menu In Vanilla JavaScript – Touch side swipe

Preview:

Description:

A Vanilla JavaScript plugin used to create a mobile-friendly off-canvas side menu that supports touch swipe events.

How to use it:

Include the touch-sideswipe.css and touch-sideswipe.js on the html page.

<link rel="stylesheet" href="touch-sideswipe.css">
<script src="touch-sideswipe.js"></script>

Create the off-canvas side menu.

<div id="touchSideSwipe" class="touch-side-swipe">
  <ul>
    <li><a href="#">Nav Item 1</a></li>
    <li><a href="#">Nav Item 2</a></li>
    <li><a href="#">Nav Item 3</a></li>
    ...
  </ul>
</div>

Create a new instance of the touch side swipe menu and done.

var touchSideSwipe = new TouchSideSwipe();

Default options to config the touch side swipe menu.

var touchSideSwipe = new TouchSideSwipe({
    // container element
    elementID: 'touchSideSwipe',
    // width and height
    elementWidth: 400, //px
    elementMaxWidth: 0.8, // *100%
    sideHookWidth: 44, //px
    // animation speed in seconds
    moveSpeed: 0.2,
    // opacity of background
    opacityBackground:
    // in pixels
    shiftForStart: 50,
    // max width of window
    windowMaxWidth: 1024, 
    
});

Open/close the nav manually with the following API methods:

// open
touchSideSwipe.tssOpen()
// close
touchSideSwipe.tssClose()

Changelog:

09/20/2018

• fix: API not working when window width > windowMaxWidth (and add message tssOpen (touch-sideswipe) cant use when window inner width > 1024px (your actual option windowMaxWidth). Please, add the condition here.)
• fix: When swiping to the left while the menu is closed the entire menu just vanishes and can’b be brought back unless you refresh.

06/03/2018

• add api call functions tssClose and tssOpen