Feature request: "Navigation drawer" off-canvas slide-in menu

[dlee]

Add Navigation drawer (aka. off-canvas slide-in menu or fly-in menu) support.

This is a very popular UI pattern nowadays.

http://cyrilmottier.com/2012/05/29/the-making-of-prixing-2-swiping-the-fly-in-app-menu/

[connors]

This type of pattern is exactly what we're going to focus on after v2 of Ratchet drops.

[dlee]

Sweet! When's Ratchet v2 expected to drop?

[connors]

Very soon.

[romanbsd]

Just for reference, the off-canvas implementation from ZURB Foundation 5 -
https://gist.github.com/romanbsd/9196994

[dlee]

I refrained from referring to the Zurb implementation because the Zurb implementation doesn't have swipe/finger tracking (i.e. you can't slowly drag the navigation drawer out from the edge of the screen).

The navigation drawer in Google Play or Youtube are better in this regard.

[romanbsd]

Sweet! Where can it be seen in the wild? For me the youtube off-canvas works even worse than Foundation's - it doesn't track the swipe, and it doesn't have any animation :(

[dlee]

@romanbsd It's on the latest Android. Maybe you have an older Android or iOS?

[romanbsd]

iOS..

[renatodeleao]

another reference:

snap.js

[nicinabox]

FWIW, I don't think Snap.js is being actively maintained.

[renatodeleao]

Yap that's true, but as I've said, just a reference.

[yisheng]

Hey guys, V2.0.1 was out now, any good news about the "slide in menu"?

[christianseel]

+1

[iampeter]

+1... or +5

[crapthings]

ratchet looks clean and nice. +1
we need off-canvas~

[christianseel]

For everyone who needs a off-canvas NOW, here's a working example with snap.js: http://jakiestfu.github.io/Snap.js/demo/apps/ratchet/template.html

[yisheng]

@christianseel The example is based on "Ratchet v1.0.0". There's some CSS work to do to work on V2.0.

[iampeter]

@christianseel thanks, I'm using something similar with snap.js v2.0 branch.

but the problem there is the whole content being used for dragging. determining when the swipe should begin, like stated in the article @dlee suggested (http://cyrilmottier.com/2012/05/29/the-making-of-prixing-2-swiping-the-fly-in-app-menu/) is very important, so that the drawer swipe will not interfere with the vertical swipe.

would be great to see an implementation considering the drag point in Ratchet.

[aceport]

+1

[bugthesystem]

+1

[scotho3]

+1

[hugorodrigues]

+1

[mamged]

+1111111111111111

[rohitbegani]

+1

[asotrox]

+1 please!

[watilde]

+1

[miguelcobain]

+1

Completely agree with this feature.

[brseixas]

+1
It´s a must have =)

[ruarch]

+1

[fariazz]

+1, it's the only reason why I'll have to go with Ionic this time

[lesterzone]

Needed.

[maxparm]

+1

[ganchenkor]

I'm going to try https://github.com/BeSite/jQuery.mmenu
UPDATE: unfortunately, mmenu breaks event listeners :-(

[avinoamr]

Pull-request pending #689

[voronianski]

+1

[fazlurr]

+1

[Weijtmans]

+1

[ashishsajwan]

+1

[alwasih]

+100

[camstuart]

+1 for sure. Otherwise ratchet looks perfect for my mobile only projects

[devyellow]

+1 waiting...

[hippycore]

+1

[milushov]

+1

why u so sloooow? :)

[giorgiobeggiora]

+1

[i-khan]

+1 we are waiting

[ragcsalo]

Any news on this one? :-)

[jpolvora]

+1