{"id":16401946,"url":"https://github.com/allthingssmitty/accessible-mega-menu","last_synced_at":"2025-02-23T15:42:35.731Z","repository":{"id":34971065,"uuid":"39048911","full_name":"AllThingsSmitty/accessible-mega-menu","owner":"AllThingsSmitty","description":"A keyboard- and screen reader-accessible mega menu","archived":false,"fork":false,"pushed_at":"2025-02-18T23:56:10.000Z","size":2135,"stargazers_count":17,"open_issues_count":0,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-19T00:29:49.768Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AllThingsSmitty.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-14T02:26:23.000Z","updated_at":"2025-02-18T23:56:14.000Z","dependencies_parsed_at":"2022-09-15T11:22:12.225Z","dependency_job_id":null,"html_url":"https://github.com/AllThingsSmitty/accessible-mega-menu","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AllThingsSmitty%2Faccessible-mega-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AllThingsSmitty%2Faccessible-mega-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AllThingsSmitty%2Faccessible-mega-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AllThingsSmitty%2Faccessible-mega-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AllThingsSmitty","download_url":"https://codeload.github.com/AllThingsSmitty/accessible-mega-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240339489,"owners_count":19785956,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T05:44:35.959Z","updated_at":"2025-02-23T15:42:35.683Z","avatar_url":"https://github.com/AllThingsSmitty.png","language":"HTML","readme":"# Accessible Mega Menu\n\nThis demonstrates how to implement a keyboard- and screen reader- accessible mega menu as a jQuery plugin. Content for the links and text within the mega menu comes from the [Web Content Accessibility Guidelines (WCAG) 2.0](http://www.w3.org/TR/WCAG/).\n\n![Mega menu image](img/mega-menu.gif)\n\n## Keyboard Accessibility\n\nThe accessible mega menu supports keyboard interaction modeled after the behavior described in the [WAI-ARIA Menu or Menu bar (widget) design pattern](http://www.w3.org/TR/wai-aria-practices/#menu), however it also respects users' general expectations for the behavior of links in a global navigation. The accessible mega menu implementation permits tab focus on each of the six top-level menu items.\n\n- When one of the menu items has focus, pressing the `Enter` key, `Spacebar` or `Down` arrow will open the submenu panel, and pressing the `Left` or `Right` arrow key will shift focus to the adjacent menu item.\n- Links within the submenu panels are included in the tab order when the panel is open. Links can also be navigated with the arrow keys or by typing the first character in the link name, which speeds up keyboard navigation considerably.\n- Pressing the `Escape` key closes the submenu and restores focus to the parent menu item.\n\n## Screen Reader Accessibility\n\nThe accessible mega menu models its use of WAI-ARIA roles, states, and properties after those described in the [WAI-ARIA Menu or Menu bar (widget) design pattern](http://www.w3.org/TR/wai-aria-practices/#menu) with some notable exceptions, so that it behaves better with screen reader user expectations for global navigation. The accessible mega menu doesn't use `role=\"menu\"` for the menu container and `role=\"menuitem\"` for each of the links therein; if it did, assistive technology will no longer interpret the links as _links_, but instead as _menu items_, and the links in the global navigation will no longer show up when a screen reader user executes a shortcut command to bring up a list of links in the page.\n\nThis approach maintains the semantic structure of the submenu panels in the accessible mega menu by omitting `role=\"menu\"` and `role=\"menuitem\"` for the global navigation; the links are organized into lists and separated by headings.\n\n## Usage\n\n### HTML\n\nThe HTML for the accessible mega menu is a `nav` element \u0026#8212; or any other container element \u0026#8212; containing a list. Each list item contains a link which is followed by a `div` or any other container element which will serve as the pop up panel.\n\nThe panel can contain any HTML content; in the following example, each panel contains three lists of links. You can explicitly define groups within the panel, between which a user can navigate quickly using the left and right arrow keys; in the following example, the CSS class `.sub-nav-group` identifies a navigable group.\n\n```html\n\u003cnav\u003e\n  \u003cul class=\"nav-menu\"\u003e\n    \u003cli class=\"nav-item\"\u003e\n      \u003ca href=\"?music\"\u003eMusic\u003c/a\u003e\n      \u003cdiv class=\"sub-nav\"\u003e\n        \u003cul class=\"sub-nav-group\"\u003e\n          \u003cli\u003e\u003ca href=\"?music\u0026amp;genre=0\"\u003eAlternative\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"?music\u0026amp;genre=3\"\u003eCountry\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u0026#8230;\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cul class=\"sub-nav-group\"\u003e\n          \u003cli\u003e\u003ca href=\"?music\u0026amp;genre=1\"\u003eDance\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"?music\u0026amp;genre=4\"\u003eElectronic\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u0026#8230;\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cul class=\"sub-nav-group\"\u003e\n          \u003cli\u003e\u003ca href=\"?music\u0026amp;genre=2\"\u003eHip-Hop/Rap\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"?music\u0026amp;genre=5\"\u003eJazz\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u0026#8230;\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    \u003c/li\u003e\n    \u003cli class=\"nav-item\"\u003e\n      \u003ca href=\"?movies\"\u003eMovies\u003c/a\u003e\n      \u003cdiv class=\"sub-nav\"\u003e\n        \u003cul class=\"sub-nav-group\"\u003e\n          \u003cli\u003e\u003ca href=\"?movies\u0026amp;genre=10\"\u003eNew Release\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"?movies\u0026amp;genre=13\"\u003eComedy\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u0026#8230;\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cul class=\"sub-nav-group\"\u003e\n          \u003cli\u003e\u003ca href=\"?movies\u0026amp;genre=11\"\u003eDrama\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"?movies\u0026amp;genre=14\"\u003eSci-Fi\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u0026#8230;\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cul class=\"sub-nav-group\"\u003e\n          \u003cli\u003e\u003ca href=\"?movies\u0026amp;genre=12\"\u003eHorror\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"?movies\u0026amp;genre=15\"\u003eDocumentary\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u0026#8230;\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\nBy default, the accessible mega menu uses the the following CSS classes to define the top-level navigation items, panels, groups within the panels, and the hover, focus, and open states. It also defines a prefix for unique ID strings, which are required to indicate the relationship of a top-level navigation item to the panel it controls.\n\n```javascript\ndefaults = {\n  // unique ID's are required to indicate aria-owns, aria-controls and aria-labelledby\n  uuidPrefix: \"menu\",\n\n  // default CSS class used to define the megamenu styling\n  menuClass: \"menu\",\n\n  // default CSS class for a top-level navigation item in the megamenu\n  topNavItemClass: \"menu-top-nav-item\",\n\n  // default CSS class for a megamenu panel */\n  panelClass: \"menu-panel\",\n\n  // default CSS class for a group of items within a megamenu panel\n  panelGroupClass: \"menu-panel-group\",\n\n  // default CSS class for the hover state\n  hoverClass: \"hover\",\n\n  // default CSS class for the focus state\n  focusClass: \"focus\",\n\n  // default CSS class for the open state\n  openClass: \"open\",\n};\n```\n\nYou can optionally override the defaults to use the CSS classes you may have already defined for your mega menu.\n\n### JavaScript\n\nBe sure to include jQuery and the `accessible-mega-menu.js` plugin script. The following initializes the first nav element in the document as an `accessibleMegaMenu`, with optional CSS class overrides.\n\n```javascript\n$(\"nav:first\").accessibleMegaMenu({\n  // prefix for generated unique id attributes, which are required\n  // to indicate aria-owns, aria-controls and aria-labelledby\n  uuidPrefix: \"megamenu\",\n\n  // CSS class used to define the megamenu styling\n  menuClass: \"nav-menu\",\n\n  // CSS class for a top-level navigation item in the megamenu\n  topNavItemClass: \"nav-item\",\n\n  // CSS class for a megamenu panel\n  panelClass: \"sub-nav\",\n\n  // CSS class for a group of items within a megamenu panel\n  panelGroupClass: \"sub-nav-group\",\n\n  // CSS class for the hover state\n  hoverClass: \"hover\",\n\n  // CSS class for the focus state\n  focusClass: \"focus\",\n\n  // CSS class for the open state\n  openClass: \"open\",\n});\n```\n\n### CSS\n\n`AccessibleMegaMenu` handles the showing and hiding of panels by adding or removing a CSS class. No inline styles are added to hide elements or create animation between states.\n\nThis CSS example enables the showing/hiding of and the layout of lists panels in the mega menu.\n\n```css\n/* mega menu list */\n.nav-menu {\n  display: block;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: relative;\n  z-index: 15;\n}\n\n/* a top level navigation item in the mega menu */\n.nav-item {\n  display: inline-block;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* first descendant link within a top level navigation item */\n.nav-item \u003e a {\n  border: 1px solid transparent;\n  display: inline-block;\n  margin: 0 0 -1px 0;\n  padding: 0.5em 1em;\n  position: relative;\n}\n\n/* focus/open states of first descendant link within a top level navigation item */\n.nav-item \u003e a:focus,\n.nav-item \u003e a.open {\n  border: 1px solid #dedede;\n}\n\n/* open state of first descendant link within a top level \n   navigation item */\n.nav-item \u003e a.open {\n  background-color: #fff;\n  border-bottom: none;\n  z-index: 1;\n}\n\n/* sub-navigation panel */\n.sub-nav {\n  background-color: #fff;\n  border: 1px solid #dedede;\n  display: none;\n  margin-top: -1px;\n  padding: 0.5em 1em;\n  position: absolute;\n  top: 2.2em;\n}\n\n/* sub-navigation panel open state */\n.sub-nav.open {\n  display: block;\n}\n\n/* list of items within sub-navigation panel */\n.sub-nav ul {\n  display: inline-block;\n  margin: 0 1em 0 0;\n  padding: 0;\n  vertical-align: top;\n}\n\n/* list item within sub-navigation panel */\n.sub-nav li {\n  display: block;\n  line-height: 1.5;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n}\n```\n\nPutting it all together, here is the completed example:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003ctitle\u003eSimple Accessible Mega Menu Example\u003c/title\u003e\n    \u003cstyle\u003e\n      /* Rudimentary mega menu CSS for demonstration */\n\n      /* mega menu list */\n      .nav-menu {\n        display: block;\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        position: relative;\n        z-index: 15;\n      }\n\n      /* a top level navigation item in the mega menu */\n      .nav-item {\n        display: inline-block;\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      /* first descendant link within a top level navigation item */\n      .nav-item \u003e a {\n        border: 1px solid transparent;\n        display: inline-block;\n        margin: 0 0 -1px 0;\n        padding: 0.5em 1em;\n        position: relative;\n      }\n\n      /* focus/open states of first descendant link within a top level navigation item */\n      .nav-item \u003e a:focus,\n      .nav-item \u003e a.open {\n        border: 1px solid #dedede;\n      }\n\n      /* open state of first descendant link within a top level \n     navigation item */\n      .nav-item \u003e a.open {\n        background-color: #fff;\n        border-bottom: none;\n        z-index: 1;\n      }\n\n      /* sub-navigation panel */\n      .sub-nav {\n        background-color: #fff;\n        border: 1px solid #dedede;\n        display: none;\n        margin-top: -1px;\n        padding: 0.5em 1em;\n        position: absolute;\n        top: 2.2em;\n      }\n\n      /* sub-navigation panel open state */\n      .sub-nav.open {\n        display: block;\n      }\n\n      /* list of items within sub-navigation panel */\n      .sub-nav ul {\n        display: inline-block;\n        margin: 0 1em 0 0;\n        padding: 0;\n        vertical-align: top;\n      }\n\n      /* list item within sub-navigation panel */\n      .sub-nav li {\n        display: block;\n        line-height: 2;\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cnav class=\"megamenu\"\u003e\n      \u003cul class=\"nav-menu\"\u003e\n        \u003cli class=\"nav-item\"\u003e\n          \u003ca href=\"?music\"\u003eMusic\u003c/a\u003e\n          \u003cdiv class=\"sub-nav\"\u003e\n            \u003cul class=\"sub-nav-group\"\u003e\n              \u003cli\u003e\u003ca href=\"?music\u0026amp;genre=0\"\u003eAlternative\u003c/a\u003e\u003c/li\u003e\n              \u003cli\u003e\u003ca href=\"?music\u0026amp;genre=3\"\u003eR\u0026amp;B/Soul\u003c/a\u003e\u003c/li\u003e\n              \u003cli\u003e\u003ca href=\"?music\u0026amp;genre=6\"\u003eIndie\u003c/a\u003e\u003c/li\u003e\n            \u003c/ul\u003e\n            \u003cul class=\"sub-nav-group\"\u003e\n              \u003cli\u003e\u003ca href=\"?music\u0026amp;genre=1\"\u003eDance\u003c/a\u003e\u003c/li\u003e\n              \u003cli\u003e\u003ca href=\"?music\u0026amp;genre=4\"\u003eElectronic\u003c/a\u003e\u003c/li\u003e\n              \u003cli\u003e\u003ca href=\"?music\u0026amp;genre=7\"\u003eMetal\u003c/a\u003e\u003c/li\u003e\n            \u003c/ul\u003e\n            \u003cul class=\"sub-nav-group\"\u003e\n              \u003cli\u003e\u003ca href=\"?music\u0026amp;genre=2\"\u003eHip-Hop/Rap\u003c/a\u003e\u003c/li\u003e\n              \u003cli\u003e\u003ca href=\"?music\u0026amp;genre=5\"\u003eJazz\u003c/a\u003e\u003c/li\u003e\n              \u003cli\u003e\u003ca href=\"?music\u0026amp;genre=8\"\u003eLatino\u003c/a\u003e\u003c/li\u003e\n            \u003c/ul\u003e\n          \u003c/div\u003e\n        \u003c/li\u003e\n        \u003cli class=\"nav-item\"\u003e\n          \u003ca href=\"?movies\"\u003eMovies\u003c/a\u003e\n          \u003cdiv class=\"sub-nav\"\u003e\n            \u003cul class=\"sub-nav-group\"\u003e\n              \u003cli\u003e\u003ca href=\"?movies\u0026amp;genre=10\"\u003eNew Release\u003c/a\u003e\u003c/li\u003e\n              \u003cli\u003e\u003ca href=\"?movies\u0026amp;genre=13\"\u003eComedy\u003c/a\u003e\u003c/li\u003e\n              \u003cli\u003e\u003ca href=\"?movies\u0026amp;genre=16\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n            \u003c/ul\u003e\n            \u003cul class=\"sub-nav-group\"\u003e\n              \u003cli\u003e\u003ca href=\"?movies\u0026amp;genre=11\"\u003eDrama\u003c/a\u003e\u003c/li\u003e\n              \u003cli\u003e\u003ca href=\"?movies\u0026amp;genre=14\"\u003eSci-Fi\u003c/a\u003e\u003c/li\u003e\n              \u003cli\u003e\u003ca href=\"?movies\u0026amp;genre=17\"\u003eAdventure\u003c/a\u003e\u003c/li\u003e\n            \u003c/ul\u003e\n            \u003cul class=\"sub-nav-group\"\u003e\n              \u003cli\u003e\u003ca href=\"?movies\u0026amp;genre=12\"\u003eHorror\u003c/a\u003e\u003c/li\u003e\n              \u003cli\u003e\u003ca href=\"?movies\u0026amp;genre=15\"\u003eDocumentary\u003c/a\u003e\u003c/li\u003e\n              \u003cli\u003e\u003ca href=\"?movies\u0026amp;genre=18\"\u003eFantasy\u003c/a\u003e\u003c/li\u003e\n            \u003c/ul\u003e\n          \u003c/div\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/nav\u003e\n\n    \u003c!-- include jQuery --\u003e\n    \u003cscript\n      src=\"https://code.jquery.com/jquery-3.7.1.min.js\"\n      integrity=\"sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=\"\n      crossorigin=\"anonymous\"\n    \u003e\u003c/script\u003e\n\n    \u003c!-- include the accessible-mega-menu plugin script --\u003e\n    \u003cscript src=\"js/accessible-mega-menu.js\"\u003e\u003c/script\u003e\n\n    \u003c!-- initialize a selector as an accessible-mega-menu --\u003e\n    \u003cscript\u003e\n      $(\"nav:first\").accessibleMegaMenu({\n        // prefix for generated unique id attributes, which are required\n        // to indicate aria-owns, aria-controls and aria-labelledby\n        uuidPrefix: \"menu\",\n\n        // CSS class used to define the megamenu styling\n        menuClass: \"nav-menu\",\n\n        // CSS class for a top-level navigation item in the megamenu\n        topNavItemClass: \"nav-item\",\n\n        // CSS class for a megamenu panel\n        panelClass: \"sub-nav\",\n\n        // CSS class for a group of items within a megamenu panel\n        panelGroupClass: \"sub-nav-group\",\n\n        // CSS class for the hover state\n        hoverClass: \"hover\",\n\n        // CSS class for the focus state\n        focusClass: \"focus\",\n\n        // CSS class for the open state\n        openClass: \"open\",\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Support\n\nCurrent versions of Chrome, Firefox, Safari, and Edge.\n\n## License\n\n[The MIT License (MIT)](http://allthingssmitty.mit-license.org/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallthingssmitty%2Faccessible-mega-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fallthingssmitty%2Faccessible-mega-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallthingssmitty%2Faccessible-mega-menu/lists"}