Mega Drop-Down Menu, Enjoy It Responsibly!
- 9 February 2010
- Web Design
- This post was written exclusively for PV.M Garage by Piervincenzo Madeo
- Comments (42)»
A perfect website is the result of the application of several techniques that come from different fields. The most famous trends in the modern web design are just the perfect combination among rules from design, web usability, user interface design, science behind HTML, CSS and Javascript.
A relatively recent trend is the use of mega drop-down navigation menus. They are simple to build and have a great appeal for the users.
What Is a Drop-Down Menu
Drop-down menu is a design element that allows the user to choose a value from a list of possible options.
It seems, at a first glance, a simple navigation menu, but when your mouse arrow points an item of the menu a magical two-dimensional panel appears through a drop-down effect. The panel provides more navigation options for the users and, often, these options are organized in groups to emphasize connections among items.
Its aim is to provide a tool for digging into the sections of the website in a clever and tidy way. In order to simplify navigation, the drop-down menu has to show the list of items, contained in the panel, at once without the need of scrolling.

Drop-Down Menus in Recent Web Design
This kind of navigation menu has the great asset of displaying at once more navigation options. So it could be a great solution when the designer has to organize several categories, products, sections or to reduce the number of steps to do an action (e.g. sign-in or login forms).
It has the big task of helping users to navigate the website in a correct way, it should provide a complete view of the contents and sections of the web application… and it would seem perfect for many web applications and, in fact, it is widespread. Below we can see some examples in wich a drop-down menu might be useful.
Organize Topics for a Web Magazine or a Website for Breaking News
Websites with a large amount of information and articles, like mirror.co.uk and sportsillustrated.cnn.com, require an easy-to-use navigation menu. A well-done mega drop-down menu might be a working solution in this case.

Arrange and Organize Categories and Tags in a Articulate Blog
A brilliant blog with good posts and a fresh design needs an effective navigation menu and, when there are several topics, a fresh drop-down effect for displaying subcategories is the best solution to create an impressive menu.

Show Several Products in an E-Commerce Website
In e-commerce website design is essential a clear presentation of products and services, and a limpid organization for the categories of articles. The drop-down menu is always a working feature for the on-line stores.

Display Login and Sign-Up Forms
The registration on a website is an operation that often annoys the user. A drop-down can be a good solution to build a quick sign-up form for saving space on your layout and for creating an user-friendly, one-step, module for the registration.

When there is the need of saving space on our home-page, a drop-down box is useful also for a login form. The famous microblogging service, Twitter, adopts a drop-down effect for the sign-in button in the home page.

Multi-Level Menu
Many usability experts recommend to avoid the use of drop-down multi-level menus because they aren’t user-friendly. In my honest opinion, the key isn’t to understand if a multi-level drop-down menu is usable or not, but if it’s possible to make it usable.
Porsche.com use a well-done multi-level menu and, friends, can you say that it isn’t usable? No!

Issue Behind Drop-Down Menu
It would seem that the drop-down menus are the resolution for many navigation problems. Caution: if something shines, it doesn’t mean that is gold.
Low Visibility for the Links
A drop-down menus is very useful to save space on your layout, they take up just the area of the title (or main category) in the layout, but is this a real advantage?
It’s evident that the “secondary” links (in the panel) don’t have a great visibility, they practically are hidden and only an interaction with the mouse pointer can activate the panel. A common mistake is that of not indicating the presence of a drop-down panel, thing that can be done through a little arrow or a similar symbol.
A hasty choice, in planning your navigation menu, may be counterproductive for the usability of your website.

Difficult Organization of the Navigation Options
An hard thing to do when we plan a mega menu is to organize the options within a relatively small space. A working approach is to separate links into groups of navigation; a general rules is of not offer huge groups with numerous options that are hard to scan.
We see, often, huge panel with many options that confuse the users. You should consider other design elements, and not a drop-down navigation menu, when you have to show a lot of information for a single item (e.g. a section for showing events).

If the menu panel have a huge list it can be very high and wide and, so, there is the possibility that low-resolution screens show only a portion of the mega drop-down.
Designer vs Response Time
Building a mega drop-down navigation menu we have to deal with the mouse movement, why?
There is two ways for displaying the panel: first, hover to activate; second, click to activate.
Remember that web interface elements should render within 0.1 seconds to provide users a complete sensation of control.
In the first case the panel appears when the pointer is over the item on the navbar, and to keep it active, the mouse arrow has to be over the menu to scan all options.
Now consider the normal activity of a user on a web page: the mouse pointer is in movement and at any passage over the drop-down menu it will cause the opening of the panel (0.1 seconds), your interface will become absolutely unusable for the simultaneous scrolling of several panels. So we can’t make the response time too fast to avoid the screen flicker. A good choice could be to add a delay of 0.3 – 0.5 seconds, so the pointer has to remain stationary for 0.4 – 0.6 seconds before of displaying the complete panel (a sort of fade-in).
Besides if the user lose the focus on the menu, or the user temporarily takes the pointer outside the active area, the panel disappear. To avoid that accidental movements of the mouse out of the active area can hide the panel (diagonal problem), we should plan the same delay also to hide the box.
In the second case the users have to click twice to open and close the panel, in this case there isn’t the problem for the movement of the pointer.

Designer vs User Behavior
It is well-known that the user don’t read, they scan a web page, so the designer have to emphasize the elements that might attract the user. A well-designed navigation menu is essential to stimulate the user at visiting more sections of the website.
A drop-down menu couldn’t be direct and intuitive for the visitors. They always choose the easy way and not the best way to obtain a gratification (an interesting content) and a big (and hard-to-scan) panel might not represent the easy way for our user.
Enjoy It Responsibly!
Modern web design is influenced by some misused and abused trends. Often the designer’s choices, in building a working web interface, aren’t completely focused on the purposes of the website and on usability; but they are driven by the frenzy of using new trends and techniques and, in most cases, a simple design element works better than a complicated and new solution.
We have just seen as a drop-down menu might be really useful, but it must be perfect to work well. So the designer has to find the right balance for his navigation menu and he has to understand which is the right choice between a standard navbar and a complete mega drop-down menu.
Below we can see some simple solutions that simplify navigation without the use of drop-downs.
Smashing Magazine – A simple navigation menu with main categories and sub-categories for the most famous web design magazine.

Ugmonk – A nice and clear solution for a navigation menu.

A last thing. It has been proved that a well-designed and sexy drop-down menu has a great appeal on the clients, it is sexy and make dynamic the website, but you must describe strengths and weaknesses to your client to allow an aware choice.
Showcase of Interesting Drop-Down Menus
In this presentation, you’ll find a variety of interesting drop-down menu designs.
Guitar Hero
Second Life
Intuitive Designs
BMI
Audi
Fuel Brand Network
Fuel Your Creativity
Giraffe Restaurants
Little Kids Bedrooms
Aviary
mtvU
The White House
MTV
Food Network
EA Video Games
GoMediaZine
Porsche
Media Temple
Mac.AppStorm
Sony USA
Incase
Republic
Owl
Philadelphia
Boxee
BuySellAds.com
Tuts+ Network
Psdtuts+
Mirror.co.uk
The Ad Feed
Designmess
Minimalist Design Magazine
Consorzio Creativo
Useful Tutorials to Learn How to Build Drop-Down Menus
Below some useful resources that may help you in making stunning drop-down navigation menus for your projects.










































25 Great Stock Images Plus with $100 Subscription Giveaway
Entrepreneurs that inspire you to grow your internet business
How to Create a Battery Icon in Photoshop

Excellent article Piervincenzo!
Great post Piervix. I actually work for a large company with a massive e-commerce site and something like a huge menu would be nice to have. I will definitely come back to this page to look for inspiration. Thanks mate!
Very nice and detailed post piervix. A handy list of references. Bookmarked.
Great article. I actually have a dropdown tutorial with CSS only on my blog. Feel free to visit :)
Thanks for the comments guys! I’m honored…
Wow! Impressive.
Thats pretty awesome!
Good article, thanks for sharing!
Great article – and some good advice.
I’ve recently used the sexy dropdown menu for a large site. It was easy to customise and looks great on the page.
However, your point about ‘hiding’ links is food for thought, and deserves consideration – beauty vs practicality and usability…
Wow.. this is a massive list. What a collection. It is amazing to see how the design changes so vividly. Thanks for sharing this, Piervix.
Glad to know you are an electronic engineer as well :)
Good stuff. Many of the examples are just your typical drop-down menus though – nothing ‘mega’ about them.
You also mention that usability experts recommend to avoid the use of drop-down menus. I think you might have missed what Jakob Nielsen said about them just a while ago.
I just said “Many usability experts recommend to avoid the use of drop-down MULTI-LEVEL menus because they aren
Really… great collection! I just want to say that often drop down navigation menus are hard to navigate, sure here there are some great examples… but in many case a simple navigation menu works well. Thanks for great tips and example.
You have a nice blog!
What makes a mega drop-down more mega than a drop-down?
You can observe that I used the adjective “mega” only in some part of the article. Yes, the title contains the word “mega”, but because just the mega menus, more than the simple drop-downs, could create problems (if they aren’t well-done). This is just my opinion.
Thanks for the comment and for the visit.
As usual, great examples and good tips!
Great post. Thanks
Wow, this is such an informative article about drop-down list. What’s else to be say. It’s so inspirational and enriching.
Thanks for sharing piervix!!!
very nice article :)
I was looking for something like this.
Thank you for sharing, piervix.
very nice article. i love to create drop-down menus with CSS.
A little arrow can go a long way. I should incorporate something subtle into my site’s dropdown.
Very nice articcle, nice works
I love the mega menu as well as the jquery hoverintent, but i added a form within the menu. This creates the issue when the form has a dropdown option as the menu and jquery seem to think i have performed the mouse out when i select an item from the dropdown. Is there a way to have it not lose focus, or maybe setting a boundary for the mouse out?
Really wonderful examples. Thanks for ur efforts.
Very nice examples.can you tell me where can i find tutorials for these navigation menu?