Skip to content

seanelliott86/a11y-menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

a11y-menu

Vanilla JavaScript keyboard accessible drop down menu plugin

How to use

A few specific classes need to be used for this plugin to work, those classes are:

  • js-a11y-menu on the parent ul of the menu
  • js-menu-items for each top level menu item
  • js-sub-menu for each submenu

These classes can be changed via the plugin options.

Suggested HTML

<nav>
	<ul role="menubar" class="js-a11y-menu">
		<li class="js-menu-items">
			<a href="#" aria-haspopup="true" aria-expanded="false" role="menuitem">About us</a>
			<ul aria-label="About us Sub Menu" role="menu" class="js-sub-menu">
				<li>
					<a href="/about-us-sub" role="menuitem">Link 1</a>
				</li>
			</ul>
		</li>
	</ul>
</nav>

Initilising the plugin

Javascript

var elem = document.querySelector('.js-a11y-menu');
var menubar = new A11yMenu(elem); 
menubar.init();

Options and Settings

var options = {
	tapStop: false,
        itemClass: ".js-menu-items",
        subMenuClass: ".js-sub-menu",
        activeClass: "is-active",
        openClass: "is-shown",
        animateClass: "is-revealed",
        horizontalMenu: true
}

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published