4 ms·

Unified Dropdown Menu: One Menu to Rule All Links

34 points by waterhole 14y ago

DenisM 14y ago
Looks a bit like Ribbon. Personally I like any menu system that has search in it. So that first 2-5 times I use search, then I learn the location and can click the right thing directly.
jeffehobbs 14y ago
This is great on desktop, but I don't think it scales smoothly down to the available space on mobile.
WiseWeasel 14y ago
I'd rather these complex sites avoid having drop-down menus entirely for their top-nav bar. Instead, have the most common general sections linked in the top-nav, and put links to their sub-sections in a section-specific navigation area inside the newly-loaded general section, separate from the top-nav. Less common pages and sections are linked in the bottom-nav. Cluttered top-nav is a hassle to use, with the worst offenders making me feel like I'm looking for a needle in a haystack every time I use it. It's much nicer to drill down to the section you need one step at a time without modal navigation windows appearing and disappearing, especially if the defaults are well-chosen. [It's also worth noting, as mentioned by others here, that the paradigm of stacked windows, and thus pull-down menus, is incompatible with pocket OS designs, so you're going to end up with completely different navigation workflows on different platforms if you go this route.]
fratido 14y ago
In times of ever increasing mobile web usage dropdown menus should be abandoned since they rely heavily on the hover state which doesn't exist on touch devices.
- subsection1h 14y ago
  dropdown menus should be abandoned since they rely heavily on the hover state Not all drop-down menus are opened by hovering. Not even close. Further, a menu with a responsive design, such as the following, negates the need to abandon anything: http://jasonweaver.name/lab/flexiblenavigation/ http://jasonweaver.name/lab/flexiblenavigation/
  - kimmel 14y ago
    > Further, a menu with a responsive design, such as the following, negates the need to abandon anything: > http://jasonweaver.name/lab/flexiblenavigation/ http://jasonweaver.name/lab/flexiblenavigation/ I ran some tests on this menu. It fails on android 2.3.x and 4.x. Also does it really need JS to function properly. No it doesn't, CSS already has all the features needed.
troels 14y ago
Seems quite similar to mega menus (http://www.useit.com/alertbox/mega-dropdown-menus.html http://www.useit.com/alertbox/mega-dropdown-menus.html)
st3fan 14y ago
Does it work on Mobile? No? Trash.
- cmwelsh 14y ago
  It could open the menu when you click it on mobile devices, and have a desktop/mobile-non-JavaScript fallback to an index page.
- subsection1h 14y ago
  Very thoughtful. By the way, the unified drop-down menu style could be incorporated into a menu that has responsive design, such as the following: http://jasonweaver.name/lab/flexiblenavigation/ http://jasonweaver.name/lab/flexiblenavigation/
wolffnc3 14y ago
Interesting idea, i'd love to hear from anyone who's tried this and see if they've gathered any data on it's effectiveness (a/b tests, heat maps etc...)
- ericras 14y ago
  We implemented a "mega box" drop down at the University of Nebraska (http://www.unl.edu/ http://www.unl.edu/) in 2009. We didn't do a production a/b test but we did do in-person a/b testing using a custom web app that tested user's ability to find things in the navigation in the mega box compared to a traditional flag model. Mega box won. Also note that this nav and template isn't unique to the homepage like most higher Ed institutions but is used site wide by all units. That was an epic battle story for another time.
  - digitalboss 14y ago
    I like the "pinning" the menu feature - interesting.....
  - wolffnc3 14y ago
    thanks for the info, i'm currently working on a redesign from a site that has all of the top 2 levels of nav showing in a side bar and the proposed design has a single level with "mega menu" style dropdowns, I'll bring this solution up as an option we can focus group. Also, I like the ability to pin the menu open, nice touch
  - ckluis 14y ago
    your font could be a bit bigger and you could provide a larger click area - but I like the design.
bluetidepro 14y ago
I like this approach, esp how it is implemented on Lebron's site. Like wolffnc3 said above, I would be curious to see if users like the idea of triggering all of the drop-downs with one hover or if they prefer the classic way.
gaetan 14y ago
Most of the top bars use single word (or very short) menus. With this unified drop down menu, you are limited to make all the sub-menus at the same size then the top menu, which is not very user friendly. I prefer to have longer sub-menus with comprehensible links like http://www.jawbone.com http://www.jawbone.com or http://www.nike.com http://www.nike.com

34 points by waterhole 14y ago

Looks a bit like Ribbon. Personally I like any menu system that has search in it. So that first 2-5 times I use search, then I learn the location and can click the right thing directly.

jeffehobbs 14y ago

This is great on desktop, but I don't think it scales smoothly down to the available space on mobile.

WiseWeasel 14y ago

I'd rather these complex sites avoid having drop-down menus entirely for their top-nav bar. Instead, have the most common general sections linked in the top-nav, and put links to their sub-sections in a section-specific navigation area inside the newly-loaded general section, separate from the top-nav. Less common pages and sections are linked in the bottom-nav. Cluttered top-nav is a hassle to use, with the worst offenders making me feel like I'm looking for a needle in a haystack every time I use it. It's much nicer to drill down to the section you need one step at a time without modal navigation windows appearing and disappearing, especially if the defaults are well-chosen. [It's also worth noting, as mentioned by others here, that the paradigm of stacked windows, and thus pull-down menus, is incompatible with pocket OS designs, so you're going to end up with completely different navigation workflows on different platforms if you go this route.]

fratido 14y ago

In times of ever increasing mobile web usage dropdown menus should be abandoned since they rely heavily on the hover state which doesn't exist on touch devices.

subsection1h 14y ago
dropdown menus should be abandoned since they rely heavily on the hover state Not all drop-down menus are opened by hovering. Not even close. Further, a menu with a responsive design, such as the following, negates the need to abandon anything: http://jasonweaver.name/lab/flexiblenavigation/ http://jasonweaver.name/lab/flexiblenavigation/
- kimmel 14y ago
  > Further, a menu with a responsive design, such as the following, negates the need to abandon anything: > http://jasonweaver.name/lab/flexiblenavigation/ http://jasonweaver.name/lab/flexiblenavigation/ I ran some tests on this menu. It fails on android 2.3.x and 4.x. Also does it really need JS to function properly. No it doesn't, CSS already has all the features needed.

troels 14y ago

Seems quite similar to mega menus (http://www.useit.com/alertbox/mega-dropdown-menus.html http://www.useit.com/alertbox/mega-dropdown-menus.html)

st3fan 14y ago

Does it work on Mobile? No? Trash.

cmwelsh 14y ago
It could open the menu when you click it on mobile devices, and have a desktop/mobile-non-JavaScript fallback to an index page.
subsection1h 14y ago
Very thoughtful. By the way, the unified drop-down menu style could be incorporated into a menu that has responsive design, such as the following: http://jasonweaver.name/lab/flexiblenavigation/ http://jasonweaver.name/lab/flexiblenavigation/

wolffnc3 14y ago

Interesting idea, i'd love to hear from anyone who's tried this and see if they've gathered any data on it's effectiveness (a/b tests, heat maps etc...)

ericras 14y ago
We implemented a "mega box" drop down at the University of Nebraska (http://www.unl.edu/ http://www.unl.edu/) in 2009. We didn't do a production a/b test but we did do in-person a/b testing using a custom web app that tested user's ability to find things in the navigation in the mega box compared to a traditional flag model. Mega box won. Also note that this nav and template isn't unique to the homepage like most higher Ed institutions but is used site wide by all units. That was an epic battle story for another time.
- digitalboss 14y ago
  I like the "pinning" the menu feature - interesting.....
- wolffnc3 14y ago
  thanks for the info, i'm currently working on a redesign from a site that has all of the top 2 levels of nav showing in a side bar and the proposed design has a single level with "mega menu" style dropdowns, I'll bring this solution up as an option we can focus group. Also, I like the ability to pin the menu open, nice touch
- ckluis 14y ago
  your font could be a bit bigger and you could provide a larger click area - but I like the design.

bluetidepro 14y ago

I like this approach, esp how it is implemented on Lebron's site. Like wolffnc3 said above, I would be curious to see if users like the idea of triggering all of the drop-downs with one hover or if they prefer the classic way.

gaetan 14y ago

Most of the top bars use single word (or very short) menus. With this unified drop down menu, you are limited to make all the sub-menus at the same size then the top menu, which is not very user friendly. I prefer to have longer sub-menus with comprehensible links like http://www.jawbone.com http://www.jawbone.com or http://www.nike.com http://www.nike.com