Touch/Swipe Integration

voodoo6 commented 11 years ago

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?

ghost commented 11 years ago

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!

ghost commented 11 years ago

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 commented 10 years ago

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 commented 10 years ago

Another gorgeous implementation is on Yahoo Answers mobile site.

torkiljohnsen commented 10 years ago

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

dbushell / Responsive-Off-Canvas-Menu

Touch/Swipe Integration #6