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

Category: Javascript , Menu & Navigation | September 20, 2018
Views Total:17,098 views
Official Page:Go to website
Last Update:September 20, 2018


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


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">
    <li><a href="#">Nav Item 1</a></li>
    <li><a href="#">Nav Item 2</a></li>
    <li><a href="#">Nav Item 3</a></li>

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
    // in pixels
    shiftForStart: 50,
    // max width of window
    windowMaxWidth: 1024, 

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

// open
// close



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


  • add api call functions tssClose and tssOpen

You Might Be Interested In:

3 thoughts on “Mobile-friendly Swipe Menu In Vanilla JavaScript – Touch side swipe

  1. RafaelLVX

    Very useful, snappy and lightweight, doesn’t rely on Jquery, all I needed! I’m looking to add it to an app I’m developing.

    Just a thought: this could work as is with regular websites, and it doesn’t because of its CSS media definition (max-width 1023). Setting the rule to 9999 solves that. The reason I need it is that I don’t want to have a separate code for PC browsers (and yes, my app will work on both phones and PC browsers natively).


Leave a Reply