Unified Dropdown Menu: One Menu to Rule All Links

Unified Dropdown Menu: One Menu to Rule All Links(uxmovement.com)

34 points by waterhole 13 years ago | 17 comments

WiseWeasel 13 years 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.]

bluetidepro 13 years 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 13 years 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 or http://www.nike.com

wolffnc3 13 years 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 13 years ago | |

We implemented a "mega box" drop down at the University of Nebraska (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 13 years ago | | |

I like the "pinning" the menu feature - interesting.....

wolffnc3 13 years 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 13 years ago | | |

your font could be a bit bigger and you could provide a larger click area - but I like the design.

jeffehobbs 13 years ago |

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

DenisM 13 years 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.

troels 13 years ago |

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

fratido 13 years 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 13 years 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/

kimmel 13 years ago | | |

> Further, a menu with a responsive design, such as the following, negates the need to abandon anything:

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

st3fan 13 years ago |

Does it work on Mobile? No? Trash.

subsection1h 13 years 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/

cmwelsh 13 years 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.