/CSS/ Embrace mega menus
28/06/2010 | Filed under Develop > CSS
Not all drop-down menus are evil incarnate. Craig Grannell explores the mega menu, showing how it can give your users fast and simple access to dozens of web pages
It’s safe to say drop-down menus have bad press when it comes to web design. Although a staple of operating system interfaces, enabling (primarily) mouse-based access to options within groups, they’re considered a usability no-no on websites. People complain of options being ’hidden’, and because scripting was historically required to activate such menus, accessibility problems were added to the mix.
Today, all shipping browsers support the :hover pseudo-class for any element (rather than just links), enabling you to use parent list items to trigger the visibility of a child menu on a mouseover – in other words, drop-down menus without scripting. Regardless, users often dislike it when options aren’t immediately visible and apparent, so for now they’re generally to be avoided. There is, however, an exception.
Over the past year or so, a chunky type of drop-down menu has been gaining traction, and it even has the backing of Jakob Nielsen, who, as long-time followers of the usability expert will know, typically goes all ’HULK SMASH!’ when the idea of drop-downs is raised. The relative newcomer is colloquially known as the ’mega menu’.
In general, such menus share properties with their slimline forebears, appearing on mouseover and providing access to grouped options; but they get around important drop-down limitations. Typically, mega menus enable access to a large number of items, pages or website sections, all from one menu. They enable access to everything at once, rather than forcing users to scroll or use sub-menus. Successful examples are styled carefully, using groups of links, column-based layout elements and strong typography to enhance usability and the ease with which users can find and access content.
About the author:
Name: Craig Grannell
Site: www.snubcommunications.com
Areas of expertise: Information architecture, site concepts, graphics, interface and front-end design
Clients: Swim~, Rebellion, IDG
What do you wish you were better at? Answering silly questions in a witty manner
Click here to download the support files
Click here to download tutorial PDF
Bookmark with:
Comments
Ben Powell / 30/06/2010 / 17:01 / http://www.webrex.co.uk
A good point well made although it may be worth adding that the :focus pseudo-class can be used too to ensure keyboard users get the same functionality.
Oliver Bristol / 08/07/2010 / 13:48 / http://www.webdesign-gm.co.uk
I've never really used drop down menus on my websites but this tutorial is easy to follow and understand. I might have to start using these mega menus when I build a site that will need them. Thanks.
Lauren / 27/07/2010 / 18:39 / http://www.draft3.com
Interesting article and nice tutorial - but I'm not sure I get the "drop down menus are evil" concept. It seems a little like saying "teenagers are evil." You may not like them in general, they may not be highly evolved, but "evil"? (And, let's face, we've got to live with 'em.)
Jason / 05/08/2010 / 12:45 / http://www.metacosm.net
Thanks for a this very useful menu tutorial, good timing too as I may need one of these for a new project and want to ensure maximum usability.
