Creating An Accessible Mega Menu with jQuery and CSS3

File Size: 118 KB
Views Total: 30084
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Creating An Accessible Mega Menu with jQuery and CSS3

A jQuery navigation plugin for creating a keyboard and screen reader accessible mega menu on website which involves a lot of pages and/or products.

Basic Usage:

1. Include the latest version of jQuery library from google CDN.

<script src="/path/to/cdn/jquery.min.js"></script>

2. Include jQuery Accessible Mega Menu' script and stylesheet files in the page.

<link rel="stylesheet" href="css/megamenu.css">
<script src="js/jquery-accessibleMegaMenu.js"></script>

3. Create a mega menu following the Html structure:

<ul class="nav-menu">
<li class="nav-item"> <a href="#">jQuery</a>
<div class="sub-nav">
<ul class="sub-nav-group">
<li><a href="#">jQuery 1</a></li>
<li><a href="#">jQuery 2</a></li>
<ul class="sub-nav-group">
<li><a href="#">jQuery 3</a></li>
<li><a href="#">jQuery 4</a></li>
<ul class="sub-nav-group">
<li><a href="#">jQuery 5</a></li>
<li><a href="#">jQuery 6</a></li>
<li class="nav-item"> <a href="?tv">Zepto</a>
<div class="sub-nav">
<ul class="sub-nav-group">
<li><a href="#">Zepto 1</a></li>
<li><a href="#">Zepto 2</a></li>
<ul class="sub-nav-group">
<li><a href="#">Zepto 3</a></li>
<li><a href="#">Zepto 4</a></li>
<ul class="sub-nav-group">
<li><a href="#">Zepto 5</a></li>
<li><a href="#">Zepto 6</a></li>

4. Initialize the mega menu with default options.

$(document).ready(function () {

5. All the settings.


  // unique ID's are required to indicate aria-owns, aria-controls and aria-labelledby
  uuidPrefix: "accessible-megamenu", 

  // default css class used to define the megamenu styling
  menuClass: "accessible-megamenu", 

  // default css class for a top-level navigation item in the megamenu
  topNavItemClass: "accessible-megamenu-top-nav-item", 

  // default css class for a megamenu panel
  panelClass: "accessible-megamenu-panel", 

  // default css class for a group of items within a megamenu panel
  panelGroupClass: "accessible-megamenu-panel-group", 

  // default css class for the hover state
  hoverClass: "hover", 

  // default css class for the focus state
  focusClass: "focus", 

  // default css class for the open state}); 
  openClass: "open",

  // default open delay when opening menu via mouseover
  openDelay: 0,

  // default open delay when opening menu via mouseover
  closeDelay: 250 




  • fix column layout within example after
  • fix ArrowUp navigation between open panels


  • Bugfix


  • Add openOnMouseover setting, and toggleButtonClass for responsive layout


  • remove non-js text outside of code comment


  • Added closeDelay option instead of hardcoded value


  • Add an optional delay when hovering over the menu
  • Fix CSS styling of top nav items


  • Don't block clicks on elements inside the toggle


  • If a navigation item has focus on page load, trigger the focusin event on the focused element so that it will expand the menu panel rather than navigate to the underlying url.


  • Fixed: Correct behavior of alphanumeric search


  • Fixed: Two mouse clicks required for top level menu in Firefox, IE, Opera.


  • bugs fixed.

This awesome jQuery plugin is developed by adobe-accessibility. For more Advanced Usages, please check the demo page or visit the official website.