CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap-3
Jonathan D.
Jonathan D.

Reputation: 115

Add swipe function on my off-canvas menu

I have a off canvas menu on my mobile HTML site.

DEMO

Its working good but slide effect working on just toggle-button. But I need swipe function on the menu. How can I add it?

JS:

$(function() {

    // Toggle Nav on Click
    $('.toggle-nav').click(function() {
        // Calling a function in case you want to expand upon this.
        toggleNav();
    });


});

function toggleNav() {
    if ($('#site-wrapper').hasClass('show-nav')) {
        // Do things on Nav Close
        $('#site-wrapper').removeClass('show-nav');
    } else {
        // Do things on Nav Open
        $('#site-wrapper').addClass('show-nav');
    }

}

Upvotes: 1

Views: 2129

Answers (2)

pistou
pistou

Reputation: 2867

Simply listen to the swipe event

$("#site-canvas").on("swipe", function() {
    toggleNav();
});

Upvotes: 1

Isaac Madwed
Isaac Madwed

Reputation: 1006

Since you're using jQuery you can take advantage of the jQuery swipe event handler.

$(window).on("swipe", function(event){ ... }).

Docs here.

Upvotes: 1

Related Questions