Mega menus are large drop-down menus that group similar navigation options.
Two Columns - Profiles
Two Columns - Communities
- 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.
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
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.