Left & Right menus with touch/swipe support and tap content to close

[voodoo6]

Firstly, this is really great - it has a very nice fluid 'feel' it.. theres a few additions that would be good to consider:

• Option for the menu to slide in from the left and/or right side of the screen
• Touch/swipe support to open and close with left/right swipe
• Ability to click anywhere in the 'content' area to close the menu

I know these things are covered in some other RWD menu plugins but none have your attention to the feel and details!

[arielsalminen]

@voodoo6 Thanks for these ideas, all are good ones, especially the first two. I’m not yet sure about that last one though? atm it might actually be quite weird as the whole page would start moving towards top on touch.

[calvinlloyd]

yes, the first two would be GREAT additions

[voodoo6]

The last point (click content to close) makes more sense in the context of a left or right off-canvas menu as opposed to a top down menu (where I agree it would be weird) - most famous example is probably the iOS facebook app - you can tap on the menu icon again or anywhere in the content to close the left off-canvas menu - makes much more sense when you use it.. Also, I found another plugin here that uses it.

Hammer.js - could be a good resource to get started with touch support?

This has attempted touch support which is not bad but it's a very rough proof of concept, (think it uses JQuery for the animation too?).

This for the smashing mag article is also a nice feeling implementation of an off-canvas responsive nav.. - however it uses 3D transforms to get the effect on the menu which feel really nice but caused problems for me when combined with position:fixed elements..

[daugaard47]

Adding an off screen navigation to this would be wonderful.

[dodozhang21]

is it possible to have the menu overlay on top of the content? then the swiping down would make more sense. if the top bar stays in place. swiping down and up could open and close the menu, it would work very similar to the android OS design. very familiar to users.

[daugaard47]

@dodozhang21 - I just used it as a fixed navigation by putting a wrap over the html markup and adding a z-index to it. That made the overlay effect.

[zambogergodesigner]

Hi there,

I've just dug a little deeper into this responsive navigation topic and found out the following:

• Many responsive navigation plugins and solutions out there miss fixed navigation, so it would be really nice to implement that despite the fact that it's quite easy to rewrite the code to achieve it. (Even I could do it, so it must be simple.)
• As of speed, responsive-nav is the best I've found, and it would be awesome to have off canvas left/right nav with this performance.
• Plus, having the same effect as on the site of jPanelMenu would also make my day, as I couldn't find any nice, simple and fast solutions out there for the same effect.

[arielsalminen]

@gerisk8 fixed navigation already is there. Will think about the left/right thing, but right now don't have it in the plans.

[flowdee]

navigation to left/right is very important and standard nowaydays. what about an implementation?

[itsmanuelrc]

C'mon! Left/right navigation and this will be the best responsive navbar for sure.