DynamicMenu is a JavaScipt class that can be used to make a nested list of links into a dynamic menu that is usable with keyboard commands, large fonts, and screen readers, specifically:
- The underlying structure is a set of nested unordered lists so that the menu can be interpreted structurally/semantically by a screen reader.
- Menus are hidden by being positioned off screen so that a screen reader user can read them without having to figure out how to show them visually.
- Standard keyboard commands (tab and shift+tab) are supported so that the menus become visible when the user tabs through the links.
- Additional keyboard commands (arrow keys, home, end) enable keyboard users to move quickly from menu to menu.
Example
The "for Customers, for Providers, about DHS" menu at the top of this page is a working example of the DynamicMenu script.
Implementation
Note: DynamicMenu is currently part of the OneNet project and depends on some of the scripts included in the OneNet utility.js. We plan to create a standalone version that does not depend on OneNet.
To make a menu (nested unordered list of links) dyanmic:
- Include dynamicmenu.js
- Add class="dropdownMenu", "flyoutMenu", or "accordianMenu" to your top-level unordered list
- And call DynamicMenu.initAll()
Download
DyanmicMenu may be used freely under the terms of the Illinois Open Source License.
Until we get the standalone version completed, download the script from https://www.dhs.state.il.us/core/common/dynamicmenu.js or as part of the OneNet project at http://onenet.codeplex.com.
