Mega Menu

Simple

Apps

Two Columns - Profiles

Two Columns - Communities

Classes

• lotusNavMenu - the class that goes on the outermost node.
• lotusLayout - the class that goes on the table.
• lotusNavMenuLarge - the class that also goes on the lotusLayout table for the apps mega menu.
• lotusMenuSeparator - the class that is used on a table row to create a bottom separator.
• lotusNavMenuConnector - the class that goes on the sharkfin node.

Basic Implementation

TBD

Accessibility

The element that triggers the mega menu (a link or button) is assigned the attribute aria-haspopup="true." If the trigger element is a link, it should also have a role="button" attribute.

If the mega menu is not a DOM child of the triggering element, the triggering element should have an aria-owns property whose value is the id of the mega menu.

Add an aria-label for the menu (like "mail menu") on the lotusNavMenu div. Add display:none to initially hide this div.

The menus are created using a table and marked up using an ARIA Grid. Put role="grid" on the table element. Put role="row" on each tr tag. Put role="rowheader" on each th tag in a row. Put role="columnheader" on any th tags in the top row only. Put role="gridcell" on any td tags.

Some of the mega menus are considered complex tables because they have a colspan on one or more of the cells. For those tables, you need to scope the th tags (scope="col" or scope="row").

Sample HTML - simple

Sample HTML - apps

Sample HTML - two columns - profiles

Sample HTML - two columns - communities

CSS (megaMenu.css)

Theme CSS (megaMenuTheme.css)

July 22, 2011 - Component was created.

July 26, 2011 - Added example mega menus.

August 25, 2011 - Updated border visuals and added the sharkfin.

December 6, 2011 - Added scope to th tags for complex table examples and updated the accessibility section to explain this.