Touch/Swipe Integration about responsive-off-canvas-menu HOT 5 OPEN

Yes, yes and yes!!! This is something I am trying to do, I think we defo need some pros involved to make this happen. Currently I am working on a bootstrap template with this and a few extras to make an epic starting point for any web designer. If this was added with easy toggles (on/off) for quick builds it would be epic!

from responsive-off-canvas-menu.

Have you seen the mashable site (http://mashable.com/) they have an epic responsive menu which I would love to make. This nav is almost the same just lacking a few parts but still an awesome start

from responsive-off-canvas-menu.

I got the desired effect for swipeopen/close with hammer.js by appending it to "body" and using:

document.getElementById('outer-wrap').addEventListener('swipe', app.toggleNav, false);

You can of course do one for swipeleft -> app.closeNav() and one for swiperight -> app.openNav()

from responsive-off-canvas-menu.

Another gorgeous implementation is on Yahoo Answers mobile site.

from responsive-off-canvas-menu.

@voodoo6 Thanks for bringing up the swipe script. Unfortunately, as you say, it lacks finesse, and is merely a proof of concept. To add swipe support, you need to use javascript. There are lots of libraries out there that can help you with this. With the [https://github.com/dbushell/Responsive-Off-Canvas-Menu/blob/master/js/main.js](javascript included in this repo), all you need is to detect a swipe and then call openNav, closeNav or toggleNav. Should be easy :)

One hurdle is conflicts with other swipable objects, like image galleries, where sideways swipes may be used for browsing through images.

from responsive-off-canvas-menu.