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

Category: Javascript , Menu & Navigation | December 14, 2016
Author: freetitelu
Views Total: 1,628
Official Page: Go to website
Last Update: December 14, 2016
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, 
    
});
  • Cristian David Home Acosta

    This is great!!