HTML & CSS
Article
By Craig Buckler

Mega Menus: the Next Web Design Trend

By Craig Buckler
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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)

--ADVERTISEMENT--

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?

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?