Skip to main content

Mega Menus: the Next Web Design Trend

By Craig Buckler

Blogs

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

mega menusMega drop-down menus are a relatively new phenomenon but I predict they will be everywhere within six months.

Mega what?

Navigating large websites has always been a design problem. You could create a huge sitemap-like menu with links to every page, but it would become impossible to scan and grow increasingly large as more pages are added.

In general, designers choose either:

  1. a small simple menu that links to pages with additional navigation as you delve deeper (Sitepoint is a good example). These are easy to use and accessible, but multiple clicks can be required to reach the content you want.
  2. dynamic drop-down or expanding menus that allow visitors to reach most pages no matter where they are. Whilst this provides quick navigation, accessibility can be poor and those without JavaScript might never see some pages*.

(* CSS-only drop-downs are possible, but they do not offer mouse over/out latency or work in every browser … guess which one!)

Mega drop-downs are half-way between the two concepts and similar to the ribbon introduced in Microsoft Office 2007:

example from actionenvelope.com

(example from actionenvelope.com)

The features of a mega drop-down menu

Typically, a mega menu:

  • is a single drop-down that appears on hover
  • shows all the options in one large panel
  • groups options into related categories
  • uses icons or other graphics to help the user.

Why mega menus will become popular

There are several reasons why mega drop-down menus will become a mainstream feature of many websites:

  1. They offer a good compromise between simple and expanding menus.
  2. They are easy to use and should suffer fewer accessibility problems.
  3. They look great and give designers more scope to express their artistic creativity!

Perhaps the most compelling reason: Jakob Nielsen approves of mega menus! The web usability expert is usually critical of most design widgets, but he thinks mega menus are a great idea and suggests designers try them to improve their website’s navigation.

What do you think? Will mega menus become ubiquitous? Are you using them already? Will you try them on your sites?

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

New books out now!

Get practical advice to start your career in programming!


Master complex transitions, transformations and animations in CSS!

Latest Remote Jobs