responsive-nav.js icon indicating copy to clipboard operation
responsive-nav.js copied to clipboard
verified publisher icon arielsalminen

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

Open voodoo6 opened this issue 12 years ago • 10 comments

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!

voodoo6 avatar Apr 09 '13 13:04 voodoo6

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

arielsalminen avatar Apr 09 '13 14:04 arielsalminen

yes, the first two would be GREAT additions

calvinlloyd avatar Apr 09 '13 14:04 calvinlloyd

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

voodoo6 avatar Apr 09 '13 14:04 voodoo6

Adding an off screen navigation to this would be wonderful.

daugaard47 avatar Apr 12 '13 19:04 daugaard47

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.

dodozhang21 avatar Apr 13 '13 15:04 dodozhang21

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

daugaard47 avatar Apr 13 '13 15:04 daugaard47

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.

zambogergodesigner avatar Jun 16 '13 22:06 zambogergodesigner

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

arielsalminen avatar Mar 02 '14 17:03 arielsalminen

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

flowdee avatar Mar 13 '14 14:03 flowdee

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

itsmanuelrc avatar May 17 '14 06:05 itsmanuelrc