The Navigation Menu plays a key role in any website, either it is a drop-down or a simple one. Its 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 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 kind of sites like magazine, 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 wants to have it as just a simple drop-down list menu (some call it as light-weight menus) and some wants 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 web sites and I guarantee you those are really the best approach to highlight best content available in a web site 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 menus one can easily showcase the popular content and can save the layout space and can use the space for highlight some other parts of their site, yeh it depends on how you lay it out – that’s where the usability comes into picture.
What is that we should consider for a best Mega drop-down menu with 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
- 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
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 few best and more user-friendly approach towards Mega Menus:
Multi Column Mega Drop-down menus with,
Table of Contents
Informational and related featured content:
Omg! – Omg.Yahoo.com
Multi Column Drop-down with list based approach:
Menu Drop-down as forms:
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 approach towards Mega Menus and if you find any related interesting article, please share the same.