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

dlee commented 10 years ago

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

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

dlee commented 10 years ago

Sweet! When's Ratchet v2 expected to drop?

connors commented 10 years ago

Very soon.

romanbsd commented 10 years ago

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

dlee commented 10 years ago

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

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

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

romanbsd commented 10 years ago

iOS..

renatodeleao commented 10 years ago

another reference:

snap.js

nicinabox commented 10 years ago

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

renatodeleao commented 10 years ago

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

yisheng commented 10 years ago

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

christianseel commented 10 years ago

+1

iampeter commented 10 years ago

+1... or +5

crapthings commented 10 years ago

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

christianseel commented 10 years ago

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

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

iampeter commented 10 years ago

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