

Unified Dropdown Menu: One Menu to Rule All Links - waterhole
http://uxmovement.com/navigation/unified-dropdown-menu-one-menu-to-rule-all-links/

======
WiseWeasel
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
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
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
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
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
I like the "pinning" the menu feature - interesting.....

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

------
DenisM
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
Seems quite similar to mega menus (<http://www.useit.com/alertbox/mega-
dropdown-menus.html>)

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

        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
> 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
Does it work on Mobile? No? Trash.

~~~
subsection1h
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/>

