<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>A11Y Nav</title></head>
<body> <div class="container"> <nav> <ul class="a11y-nav main-nav"> <li> <button aria-expanded="false" aria-controls="custom_id_1"> Multi-level Example </button> <ul id="custom_id_1"> <li> <button aria-expanded="false" aria-controls="custom_id_2"> Normal Multi Example </button> <ul id="custom_id_2"> <li> <button aria-expanded="false" aria-controls="custom_id_3"> Normal Multi Example 2 </button> <ul id="custom_id_3"> <li><a href="#">SUB SUB SUB SUBS!</a></li> <li><a href="#">SUB SUB SUB SUBS!</a></li> <li><a href="#">SUB SUB SUB SUBS!</a></li> </ul> </li> <li><a href="#">Sub Sub Nav Link 2</a></li> <li><a href="#">Sub Sub Nav Link 3</a></li> </ul> </li> <li> <button aria-expanded="false" aria-controls="custom_id_abc"> Test 1 </button> <ul id="custom_id_abc"> <li><a href="#">Test Sub Sub Nav Link</a></li> <li><a href="#">Test Sub Sub Nav Link 2</a></li> <li><a href="#">Test Sub Sub Nav Link 3</a></li> </ul> </li> <li> <button aria-expanded="false" aria-controls="custom_id_xyz"> Test 2 </button> <ul id="custom_id_xyz"> <li><a href="#">Sub Sub Nav Link</a></li> <li><a href="#">Sub Sub Nav Link 2</a></li> <li><a href="#">Sub Sub Nav Link 3</a></li> </ul> </li> </ul> </li> <li class="has-mega-menu"> <button aria-expanded="false" aria-controls="custom_id_mega"> Custom Mega Menu </button> <div class="mega-menu" id="custom_id_mega"> <ul> <li> <a href="#">Parent Page</a> <ul> <li><a href="#">Child Page 1</a></li> <li><a href="#">Child Page 2</a></li> <li><a href="#">Child Page 3</a></li> <li><a href="#">Child Page 4</a></li> <li><a href="#">Child Page 5</a></li> <li><a href="#">Child Page 6</a></li> <li><a href="#">Child Page 7</a></li> <li><a href="#">Child Page 8</a></li> <li><a href="#">Child Page 9</a></li> </ul> </li> <li> <a href="#">Parent Page</a> <ul> <li><a href="#">Child Page 1</a></li> <li><a href="#">Child Page 2</a></li> <li><a href="#">Child Page 3</a></li> </ul> </li> <li> <a href="#">Parent Page</a> <ul> <li><a href="#">Child Page 1</a></li> <li><a href="#">Child Page 2</a></li> </ul> </li> <li> <a href="#">Parent Page</a> <ul> <li><a href="#">Child Page 1</a></li> <li><a href="#">Child Page 2</a></li> <li><a href="#">Child Page 3</a></li> <li><a href="#">Child Page 4</a></li> <li><a href="#">Child Page 5</a></li> </ul> </li> <li> <a href="#">Parent Page</a> <ul> <li><a href="#">Child Page 1</a></li> <li><a href="#">Child Page 2</a></li> </ul> </li> <li> <a href="#">Parent Page</a> <ul> <li><a href="#">Child Page 1</a></li> <li><a href="#">Child Page 2</a></li> <li><a href="#">Child Page 3</a></li> <li><a href="#">Child Page 4</a></li> <li><a href="#">Child Page 5</a></li> <li><a href="#">Child Page 6</a></li> <li><a href="#">Child Page 7</a></li> </ul> </li> </ul> <img src="https://picsum.photos/250" alt="" /> </div> </li> <li> <button aria-expanded="false" aria-controls="custom_id_menu"> Menu </button> <ul id="custom_id_menu"> <li> <a href="#">Top Link</a> </li> <li> <button aria-expanded="false" aria-controls="with_children_1"> With Children </button> <ul id="with_children_1"> <li><a href="#">Child Page 1</a></li> <li><a href="#">Child Page 2</a></li> <li><a href="#">Child Page 3</a></li> <li><a href="#">Child Page 4</a></li> <li><a href="#">Child Page 5</a></li> <li><a href="#">Child Page 6</a></li> <li><a href="#">Child Page 7</a></li> <li><a href="#">Child Page 8</a></li> <li><a href="#">Child Page 9</a></li> </ul> </li> <li> <button aria-expanded="false" aria-controls="with_children_2"> With Children 2 </button> <ul id="with_children_2"> <li><a href="#">Child Page 1</a></li> <li><a href="#">Child Page 2</a></li> <li><a href="#">Child Page 3</a></li> </ul> </li> </ul> </li> <li> <a href="#" data-a11y-link>Simple Link</a> </li> <li> <button aria-expanded="false" aria-controls="custom_id_menu_2"> Menu 2 </button> <ul id="custom_id_menu_2"> <li> <button aria-expanded="false" aria-controls="another_example_id"> Test Last Menu </button> <ul id="another_example_id"> <li><a href="#">Last Menu</a></li> <li><a href="#">Is Right Aligned</a></li> <li><a href="#">When Opened</a></li> <li><a href="#">Child Page 1</a></li> <li><a href="#">Child Page 2</a></li> <li><a href="#">Child Page 3</a></li> <li><a href="#">Child Page 4</a></li> <li><a href="#">Child Page 5</a></li> <li><a href="#">Child Page 6</a></li> </ul> </li> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> </ul> </li> </ul> </nav> </div> <div class="container"> <div class="main"> <h1>A11Y Nav</h1> <p>Library for accessible navigations. Currently a work in progress, but it has bare minimum functionality needed for production use. Will be adding features as I need them.</p> <p> The site navigation utilizes keyboard functionality using the arrow keys, enter, escape, and spacebar commands. Arrow keys can navigate between previous/next items and also move down into a nested menu. Enter will open a nested menu and escape will close the current menu. Spacebar will open the current menu. </p> <p>Currently works in all modern browsers except IE 11 until I figure out how to correctly polyfill the UMD build.</p> <h2>Example Usage</h2> <pre><code class="language-js">const a11yNav = new A11YNav(document.querySelector(".a11y-nav"), options); </code></pre> <script type="text/plain" class="language-html"><ul class="a11y-nav"> <li> <button aria-expanded="false" aria-controls="id_here">First Level Item</button> <ul id="id_here"> <li> <button aria-expanded="false" aria-controls="id_here_2">Second Level Item</button> <ul id="id_here_2">...</ul> </li> </ul> </li> <li><a href="#">Simple Link</a></li> <li> <button aria-expanded="false" aria-controls="id_here_3">Custom Mega Menu</button> <!-- Example of using your own custom mega menu HTML --> <div id="id_here_3" class="mega-menu"> <ul>...</ul> <img src="image.jpg" alt="" /> </div> </li> ...</ul> </script> <h2>Default Options</h2> <pre><code class="language-js">{ // adds delay for toggling menu open/close animation classes animate: true, // amount of time in ms for menu open/close animation duration: 300, // Enables use of arrow keys to navigate menus useArrowKeys: true, // Enables closing of menus when focus leaves the nav closeOnBlur: true, // Class to add to body when a menu is open. If false, no class is added. bodyClass: "a11y-nav-menu-open",} </code></pre> <h2>Methods</h2> <pre><code class="language-js">// Only option currently available is destroyconst a11yNav = new A11YNav(document.querySelector('.a11y-nav'));a11yNav.destroy(); </code></pre> </div> <div class="side"> <ul class="a11y-nav rail-nav"> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Data-research-and-tools-nav-menu">Data, research, and tools</button> <ul id="a11y-Data-research-and-tools-nav-menu"> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Lorem-Lipsum-Dolor-330-nav-menu">Lorem Lipsum Dolor</button> <ul id="a11y-Lorem-Lipsum-Dolor-330-nav-menu"> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Level-3-Item-610-nav-menu">Level 3 Item</button> <ul id="a11y-Level-3-Item-610-nav-menu"> <li><a href="#" class="active">Level 4 Item 1</a></li> <li><a href="#">Level 4 Item 2</a></li> </ul> </li> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Level-3-Item-922-nav-menu">Level 3 Item</button> <ul id="a11y-Level-3-Item-922-nav-menu"> <li><a href="#">Level 4 Item 1</a></li> <li><a href="#">Level 4 Item 2</a></li> </ul> </li> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Level-3-Item-193-nav-menu">Level 3 Item</button> <ul id="a11y-Level-3-Item-193-nav-menu"> <li><a href="#">Level 4 Item 1</a></li> <li><a href="#">Level 4 Item 2</a></li> </ul> </li> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Level-3-Item-667-nav-menu">Level 3 Item</button> <ul id="a11y-Level-3-Item-667-nav-menu"> <li><a href="#">Level 4 Item 1</a></li> <li><a href="#">Level 4 Item 2</a></li> </ul> </li> </ul> </li> <li><a href="#">For Professionals</a></li> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Another-Dropdown-812-nav-menu">Another Dropdown</button> <ul id="a11y-Another-Dropdown-812-nav-menu"> <li><a href="#">Link</a></li> <li><a href="#">Another Link</a></li> </ul> </li> </ul> </li> <li> <button type="button" aria-expanded="true" aria-controls="a11y-Resources-nav-menu">Resources</button> <ul id="a11y-Resources-nav-menu"> <li> <button type="button" aria-expanded="true" aria-controls="a11y-Lorem-Lipsum-Dolor-318-nav-menu">Lorem Lipsum Dolor</button> <ul id="a11y-Lorem-Lipsum-Dolor-318-nav-menu"> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Level-3-Item-991-nav-menu">Level 3 Item</button> <ul id="a11y-Level-3-Item-991-nav-menu"> <li><a href="#">Level 4 Item 1</a></li> <li><a href="#">Level 4 Item 2</a></li> </ul> </li> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Level-3-Item-776-nav-menu">Level 3 Item</button> <ul id="a11y-Level-3-Item-776-nav-menu"> <li><a href="#">Level 4 Item 1</a></li> <li><a href="#">Level 4 Item 2</a></li> </ul> </li> <li> <button type="button" aria-expanded="true" aria-controls="a11y-Level-3-Item-720-nav-menu">Level 3 Item</button> <ul id="a11y-Level-3-Item-720-nav-menu"> <li><a href="#" class="active">Active Page Example</a></li> <li><a href="#">Level 4 Item 2</a></li> </ul> </li> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Level-3-Item-571-nav-menu">Level 3 Item</button> <ul id="a11y-Level-3-Item-571-nav-menu"> <li><a href="#">Level 4 Item 1</a></li> <li><a href="#">Level 4 Item 2</a></li> </ul> </li> </ul> </li> <li><a href="#">For Professionals</a></li> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Another-Dropdown-534-nav-menu">Another Dropdown</button> <ul id="a11y-Another-Dropdown-534-nav-menu"> <li><a href="#">Link</a></li> <li><a href="#">Another Link</a></li> </ul> </li> </ul> </li> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Lorem-Lipsum-Dolor-nav-menu">Lorem Lipsum Dolor</button> <ul id="a11y-Lorem-Lipsum-Dolor-nav-menu"> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Lorem-Lipsum-Dolor-770-nav-menu">Lorem Lipsum Dolor</button> <ul id="a11y-Lorem-Lipsum-Dolor-770-nav-menu"> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Level-3-Item-269-nav-menu">Level 3 Item</button> <ul id="a11y-Level-3-Item-269-nav-menu"> <li><a href="#">Level 4 Item 1</a></li> <li><a href="#">Level 4 Item 2</a></li> </ul> </li> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Level-3-Item-926-nav-menu">Level 3 Item</button> <ul id="a11y-Level-3-Item-926-nav-menu"> <li><a href="#">Level 4 Item 1</a></li> <li><a href="#">Level 4 Item 2</a></li> </ul> </li> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Level-3-Item-217-nav-menu">Level 3 Item</button> <ul id="a11y-Level-3-Item-217-nav-menu"> <li><a href="#">Level 4 Item 1</a></li> <li><a href="#">Level 4 Item 2</a></li> </ul> </li> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Level-3-Item-61-nav-menu">Level 3 Item</button> <ul id="a11y-Level-3-Item-61-nav-menu"> <li><a href="#">Level 4 Item 1</a></li> <li><a href="#">Level 4 Item 2</a></li> </ul> </li> </ul> </li> <li><a href="#">For Professionals</a></li> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Another-Dropdown-896-nav-menu">Another Dropdown</button> <ul id="a11y-Another-Dropdown-896-nav-menu"> <li><a href="#">Link</a></li> <li><a href="#">Another Link</a></li> </ul> </li> </ul> </li> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Related-Content-nav-menu">Related Content</button> <ul id="a11y-Related-Content-nav-menu"> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Lorem-Lipsum-Dolor-246-nav-menu">Lorem Lipsum Dolor</button> <ul id="a11y-Lorem-Lipsum-Dolor-246-nav-menu"> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Level-3-Item-35-nav-menu">Level 3 Item</button> <ul id="a11y-Level-3-Item-35-nav-menu"> <li><a href="#">Level 4 Item 1</a></li> <li><a href="#">Level 4 Item 2</a></li> </ul> </li> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Level-3-Item-241-nav-menu">Level 3 Item</button> <ul id="a11y-Level-3-Item-241-nav-menu"> <li><a href="#">Level 4 Item 1</a></li> <li><a href="#">Level 4 Item 2</a></li> </ul> </li> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Level-3-Item-489-nav-menu">Level 3 Item</button> <ul id="a11y-Level-3-Item-489-nav-menu"> <li><a href="#">Level 4 Item 1</a></li> <li><a href="#">Level 4 Item 2</a></li> </ul> </li> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Level-3-Item-134-nav-menu">Level 3 Item</button> <ul id="a11y-Level-3-Item-134-nav-menu"> <li><a href="#">Level 4 Item 1</a></li> <li><a href="#">Level 4 Item 2</a></li> </ul> </li> </ul> </li> <li><a href="#">For Professionals</a></li> <li> <button type="button" aria-expanded="false" aria-controls="a11y-Another-Dropdown-614-nav-menu">Another Dropdown</button> <ul id="a11y-Another-Dropdown-614-nav-menu"> <li><a href="#">Link</a></li> <li><a href="#">Another Link</a></li> </ul> </li> </ul> </li> <li><a href="#">Regular Link</a></li> </ul> </div> </div> <a href="https://github.com/mmahandev/a11y-nav" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style> <script type="module" src="/src/index.ts"></script></body>
</html>