Touch/Swipe Integration

[voodoo6]

Firstly, thanks for this - its the best off-canvas implementation I've seen, most importantly, it feels good when in use..

To help 'close the gap' with native apps further, I think this would really benefit from some additions:

• Touch/swipe support
• ability to have multiple menus (ie. menu on left and/or right)
• scrollable menu independent of main content (as facebook native app - so if there were a lot of items in the menu they could be scrolled into view)
• ability to tap/click off-menu to close the nav

As mentioned in the smashing-mag post, Hammer.js looks like it could help with the touch events. I also found this recently which is the best swipe-able off-canvas nav I've found (most others I found are too 'twitchy' and don't have a native feel). However it lacks the finesse of this menu and I think uses Jquery for the animations.

I'm currently learning javascript and jquery so have limited skills to implement what I've mentioned - It would be really helpful if anybody has any resources or forks which have these additional functionality mentioned to share?

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!

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

[JanMesaric]

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()

[fny]

Another gorgeous implementation is on Yahoo Answers mobile site.

[torkiljohnsen]

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