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

Category: Javascript , Menu & Navigation | September 20, 2018
Author: freetitelu
Views Total: 3,961
Official Page: Go to website
Last Update: September 20, 2018
License: MIT

Preview:

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

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

One thought on “Mobile-friendly Swipe Menu In Vanilla JavaScript – Touch side swipe

Leave a Reply