Foundation 5 Off-canvas Swipe

Question

Is it possible to open and close the Foundation 5 Off-Canvas menu with swipe gestures?

Reference: http://foundation.zurb.com/docs/components/offcanvas.html

Answer 1

This feature is currently not supported by Foundation, but there is a simple solution using jQuery Mobile. Note that this example is for a single off-canvas to the left.

First, be sure to include jQuery and JQM:

jQuery: http://jquery.com/
jQuery Mobile: http://jquerymobile.com/

Then add the following:

$( document ).on( "swipeleft swiperight", function( e ) {
    if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
        if ( e.type === "swipeleft"  ) {
            $('.off-canvas-wrap').removeClass('move-right');
        } else if ( e.type === "swiperight" ) {
            $('.off-canvas-wrap').addClass('move-right');
        }
    }
});

Just thought I'd share since I couldn't find any solutions!

Answer 2

I just want to add to @88MPG's excellent answer;

I'm not already using jquery.mobile and had some problems with my code when using it. Instead I added jquery.touchSwipe from github and use the following code:

<script src="@Url.Content("~/Scripts/jquery.touchSwipe.min.js")"></script>
<script>
    $(document).swipe({
        swipeLeft: function (event, distance, duration, fingerCount, fingerData) {
            $('.off-canvas-wrap').removeClass('move-right');
        },
        swipeRight: function (event, distance, duration, fingerCount, fingerData) {
            $('.off-canvas-wrap').addClass('move-right');
        }
    });
</script>

N.B: Of course the function parameters above can be skipped. I just added them for brewity.