The Navigation Menu plays a key role in any website, either it is a drop-down or a simple one. It’s ok for small sites with 5 to 6 menu items, you will have more options to present the menu with better navigation by giving good look and feel by taking the latest web trends & usability into consideration.
But what if you have a huge portal or a site with lots of content to feature to the visitors of your site? That’s the first and main question that comes to every designer and developer before they plan to develop a website.
It’s the same case with me – I always dig into different kinds of sites like magazines, news, huge portals, etc. to find how others are giving better navigation – the different ways/approaches to present the menu by highlighting their key sections/parts of their site.
Few consider drop-down menus with very informative text or tool-tips, few want to have it as just a simple drop-down list menu (some call it as light-weight menus) and some want to highlight the related featured content in a drop-down menu as a grid or column-based along with their regular menu items – which we call those huge menus as the Mega drop-down menus or Mega Drop-Down Multi-Column Menu or Informational Navigation or simply the Mega Menu, etc.
The Mega drop-down Menus became the latest trend in websites and I guarantee you those are really the best approach to highlight the best content available in a website before one wants to enter into that particular section and matters a lot in terms of Usability and User Interface.
By considering this Mega drop-down menu one can easily showcase the popular content and can save the layout space and can use the space to highlight some other parts of their site, yeh it depends on how you lay it out – that’s where the usability comes into the picture.
What is that we should consider for the best Mega drop-down menu with a cool User Interface and having more Usability:
- Should be clean with less main menu items
- Menu with Informational messages, use Tool-tips if you are using short text or abbreviations in menu items
- Typography
- Breathing Space
- Menu Items with related Icons or pictures
- Differentiating the menu items with Sub-Menus or Sub-Headings or column headings
- Either it could be a horizontal, vertical or floating menu – based on what the site demands
- Easy and Fast to use – finally usability matters
- Most Important – should be Browser compatible
Many won’t consider drop-down menus, they are most worried about blocking JavaScript and some users might not understand that a particular menu has got more links to check, etc., which means poor presentation. And many feel if they use drop-down menus it won’t be SEO optimized etc. There is nothing like that, now Google bot even grabs the JavaScript-based and hidden content.
If you observe we have a multi-column drop-down menu, but I won’t consider it as a Mega drop-down menu because as I mentioned above mega menus are more informational and with related featured content in the drop-down.
If you want to build the Mega drop-down menu, you could consider our Pure CSS and browser compatible Multi-level Multi-column Multi drop-down Menus with pure CSS to start with (which is available for download), and for your info daily at least a minimum of 50 people are downloading this menu and I am proud about it :).
And here are a few best and more user-friendly approaches towards Mega Menus:
Multi-Column Mega Drop-down menus with,
Informational and related featured content:
Reuters.com
Asylum.co.uk
Bnet.com
TheDailyBeast.com
AccessHollywood.com
Omg! – Omg.Yahoo.com
GigaOM.com
EA.com
GoDaddy.com
MSNBC
GuitarHero.com
Aviary.com
Multi Column Drop-down with list based approach:
DeviantArt.com
Salon.com
WhiteHouse.gov
MTV.com
Republic.co.uk
ActionEnvelope.com
MTVU.com
CBS.com
NPR.org
REI.com
NorthernTool.com
LittleKidsBedrooms.com
OfficeDepot.com
HouseOffraser.co.uk
FoodNetwork.com
Menu Drop-down as forms:
OfficeMax.com
Twitter.com
Boxee.tv
Tutorials:
Build Multi-Level Multi-Column Multi Menus with pure CSS (Cross-Browser Compatible)
Mega Dropdowns with CSS and jQuery
My first jQuery plugin for Big Ass Menu
Cut & Paste jQuery Mega Menu
Interesting articles on Mega drop-down menus:
Mega Dropdown Menus
Designing Drop down menus examples and best practices
Mega Drop-down Menus
Mega Drop-down menu – Enjoy it responsibly
Mega Menus – Designm.ag
I hope you found this article useful, if so why not show some love and spread it. Leave your thoughts and opinion on the approach towards Mega Menus and if you find any related interesting article, please share the same.
