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