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

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/

Feb 18 '14 08:02 dlee

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

Feb 18 '14 21:02 connors

Sweet! When's Ratchet v2 expected to drop?

Feb 18 '14 21:02 dlee

Very soon.

Feb 18 '14 21:02 connors

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

Feb 24 '14 21:02 romanbsd

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.

Feb 24 '14 21:02 dlee

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

Feb 24 '14 21:02 romanbsd

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

Feb 24 '14 21:02 dlee

iOS..

Feb 24 '14 21:02 romanbsd

another reference:

snap.js

Feb 25 '14 16:02 renatodeleao

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

Feb 25 '14 16:02 nicinabox

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

Feb 25 '14 17:02 renatodeleao

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

Mar 11 '14 06:03 yisheng

+1

Mar 11 '14 07:03 christianseel

+1... or +5

Mar 20 '14 00:03 iampeter

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

Mar 26 '14 07:03 crapthings

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

Mar 26 '14 08:03 christianseel

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

Mar 26 '14 08:03 yisheng

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

Mar 27 '14 08:03 iampeter

+1