Mega menu - nschonni/wet-boew GitHub Wiki
Project lead: Paul Jackson (@pjackson28)
Mega menus are usually displayed as large panels divided into groups of navigation options structured through layout, typography, and (sometimes) images. All options are visible at once without scrolling. Secondary navigation is presented in large, structured menus that are triggered by users in relation to primary menu items.
Working example of the mega menu
- Allows users to develop a complete mental model of a site very quickly.
- Allows users to navigate throughout the site without requiring multiple page loads.
- Provides users with the option of going to deeply nested links, without having to navigate through interim pages.
- Conforms to the Standard on Web Accessibility and Standard on Web Usability
- Conforms to WCAG 2.0 AA
- Responsive design that includes both mobile and desktop views
- Uses HTML5 semantic elements and WAI-ARIA to enhance accessibility
- Groups most of the navigation after the content area
- Validates to HTML5 and is XML conformant
- CSS styling will not be entirely consistent across all browsers since many of them will interpret CSS syntax differently.
- Menu structures should be usability tested before they are implemented. Techniques such as card sorting can help create usable menus.
Mega menus can be used on their own or in combination with a vertical menu (e.g. left nav).
- You can represent the scope of content that is in each section in a single menu.
- Users need to be able to quickly review the full breadth of content available on a site.
- Top tasks are two or three (or more) levels deep in the site's hierarchy.
- There is sufficient content to populate a secondary menu.
- Don't use a mega menu for sites unless they have sufficient content to warrant one.
Mega menus appear in relation to navigation items on the primary horizontal site menu. It must be clear that the mega menu is associated with the menu item that triggered it. This can be accomplished by making them appear to be one element.
The mega menu should be wider than the menu item from which it is triggered. This large size makes it easier for users to navigate to the contents of the menu without inadvertently dismissing it.
A mega menu may contain simply a list of links to the items in that section. They can also include multiple columns, formatting, and headings. Any headings included in a mega menu must also be links to relevant landing pages.
A mega menu can be used on some or all menu items. There is a visual indicator on menu items to show that a mega menu can be triggered from them. For Government of Canada sites, a triangle with one point facing down is used.
When users follow the primary horizontal menu item that triggers the mega menu, a suitable landing page for that section loads. When the new page loads, the mega menu closes.
When users make a selection within the mega menu, the relevant page loads. When the new page loads, the mega menu closes.
When the landing page of the menu item is active, the mega menu continues to function (allowing users to continue to use the mega menu for navigation within that section).
Actions are instantaneous. Once triggered, the menu appears almost instantaneously (within 0.1 seconds) so the user is not left waiting while it appears. It may be necessary to adjust the contents of the menu to ensure that it can load instantly on even low-end systems or over slow transmission speeds.
Aim for a delay sufficient to allow a user to move the mouse across the screen without inadvertently triggering a menu, but fast enough to not force the user to wait for the menu once they choose it.
Dismiss the menu no sooner than 0.5 seconds after the pointer is no longer hovering over it. If possible, the 0.5 seconds should not begin to be counted if the pointer is on a path to the menu. However, immediately hide the menu when the pointer is hovering over another menu item. (Note that if your menu is sufficiently large, there should be no empty space between the menu item that triggered it and the menu itself.) (Footnote 1)
The contents of the mega menu are related to the primary menu item from which they are triggered. The links in the menu must be planned carefully, as part of the development of the Information Architecture of a website. Usability testing on the proposed Information Architecture and navigation labels is highly recommended.
It is not necessary to include all links within a given category, rather, the mega menu should focus on helping users get to the most popular or priority information.
Since the primary navigation elements are no longer clickable to facilitate their use on a variety of devices and users - touch screens, keyboard users and screen readers - a link to the top level page can be added within the menu using "[category] - Main page".
Category headings within a mega menu should be linked to landing pages for those categories. Landing pages should facilitate access to further information within that section. Links must be descriptive and should have enough space to accurately select them on a small touch screen interface such as a mobile device.
If used, mega menus must supplement existing navigation options. A mega menu shouldn’t provide different information or functionality from what is available on the landing page associated with the menu item that triggered it.
- Apple Computer, Inc. Technical Note TN2262: Preparing Your Web Content for iPad. Safari Developer Library, May 10, 2010. Wed. 23 Nov. 2011.
- Cronin, Matt. Designing Drop-Down Menus: Examples and Best Practices. Smashing Magazine, March 24, 2009. Wed. 23 Nov. 2011.
- Gupta, Rinchan. Mega drop down menus. UIPattern.com, Sept. 9, 2009. Wed. 23 Nov. 2011.
- Nielsen, Jakob. Alertbox: Mega dropdown menus. Useit.com, Jakob Nielsen’s Website. Nielsen Norman Group, March 23, 2009. Wed. 23 Nov. 2011.
- Alertbox: Mega-Menus Gone Wrong. Useit.com, Jakob Nielsen’s Website. Nielsen Norman Group, Nov. 16, 2010. Wed. 23 Nov. 2011.
- Alertbox: Usability Testing of USA.gov Mega-Menus. Useit.com, Nov. 16, 2010. Wed. 23 Nov. 2011.
- Spool, Jared M. 6 Epic Forces Battling Your Mega Menus. uie.com, Aug. 24, 2011. Wed. 23 Nov. 2011.
- Tullis, Thomas S, Ellen Connor, Lori LeDoux, Ann Chadwick-Dias, Marty True, & Michael Catani, A Study of Website Navigation Methods. Usability Professionals Association Conference, 2005. (http://www.eastonmass.net/tullis/WebsiteNavigation/WebsiteNavigationPaper.htm)
- Walton, Trent. Non Hover". TrentWalton.com, July 5, 2010. Wed. 23 Nov. 2011.
Footnote 1 - Nielsen, Jakob. Alertbox: Mega dropdown menus. Useit.com, Jakob Nielsen’s Website. Nielsen Norman Group, March 23, 2009. Wed. 23 Nov. 2011.