search

foundation / foundation-sites

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.
https://get.foundation
MIT License
29.67k stars 5.48k forks source link

[enhancement][4.0] "Don't make response time too fast" in top-bar menus #1660

Closed eillarra closed 11 years ago

eillarra commented 11 years ago

Before I explain what's going on here, I recommend to read this article by Jacob Nielsen: http://www.nngroup.com/articles/mega-menus-work-well/

The important idea here is that if a user moves diagonally from the main item to the dropdown content, taking the pointer outside the active area (this happens), the dropdown should not disappear.

In the past, I have made some implementation of this using the jQuery hoverIntent plugin: http://cherne.net/brian/resources/jquery.hoverIntent.html but maybe you guys can think of something better.

From the article:

Thus, the timing should be:

  • Wait 0.5 seconds.
  • If the pointer is still hovering over a navbar item, display its mega drop-down within 0.1 seconds.
  • Keep showing it until the pointer has been outside both the navbar item and the drop-down for 0.5 seconds. Then, remove it in less than 0.1 seconds.

One exception to item 3: The very best implementations can sense when a user is moving the pointer from the navbar item to a destination within the drop-down. When the pointer is on such a path, the drop-down should remain visible. This supplementary guideline addresses the diagonal problem, which happens when the path temporarily takes the pointer outside the active area. The drop-down shouldn't disappear when the user is on the way to point to something within it.

hatefulcrawdad commented 11 years ago

I definitely agree that the drop-down menus are difficult with just plain CSS. We'll look into adding some sort of delay here in the near future. Thanks for reporting and for all the information! We love our community for keeping us on our toes and constantly helping improve the framework. If you have any ideas you've cooked up, feel free to submit a pull request and we'll check it out. Happy coding!

jacmoe commented 11 years ago

Personally, I'd like the drop-down menus to behave like the dropdown buttons do, i.e. they do not fly out until they are clicked. :)

It really drives me mad when things fly out at me when trying to navigate a website.

Perhaps this could be configurable and optional? I understand the reasoning behind the plain CSS philosophy. However ... :)

hatefulcrawdad commented 11 years ago

I do like the idea of making the top-bar clickable as an option. It's becoming a pretty common convention these days. We'll look into how we accomplish this. We'll need to add a bit of JS, but that shouldn't be a problem as far as I can see.

mrsweaters commented 11 years ago

Fixed: https://github.com/zurb/foundation/commit/3659881e75afc990881535870173e6e9ceb3137c

Added data-topbar="hover" configuration to enable hover states, click state by defualt.