# jquery.accessible-menu.js

> A keyboard accessible navigation menu.

## Usage

Create your nav menu using an unordered list.

```html
<div class="navbar">
    <ul>
        <li>
            <a href="#">Services</a>
            <ul>
                <li>
                    <a href="#">Demand Generation</a>
                    <ul>
                        <li><a href="#">Inbound-Marketing</a></li>
                        <li><a href="#">Content-Marketing</a></li>
                        <li><a href="#">Analytics</a></li>
                    </ul>
                </li>
                <li><a href="#">Marketing Automation</a></li>
                <li><a href="#">Technology Services</a></li>
                <li><a href="#">Video</a></li>
            </ul>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>
</div>
```

Initialize the menu and pass in additional settings.

```js
$('.navbar').accessibleMenu({
    openOnTab: false
});
```

## Settings

<table>
    <thead>
        <tr>
            <th>
                Name
            </th>
            <th>
                Type
            </th>
            <th>
                Default
            </th>
            <th>
                Description
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                hoverClass
            </td>
            <td>
                string
            </td>
            <td>
                <code>'hover'</code>
            </td>
            <td>
                    CSS class added to <code>li</code> element when sub-menu contains hover.
            </td>
        </tr>
        <tr>
            <td>
                focusClass
            </td>
            <td>
                string
            </td>
            <td>
                <code>'focus'</code>
            </td>
            <td>
                CSS class added to <code>li</code> element when sub-menu contains focus.
            </td>
        </tr>
        <tr>
            <td>
                openClass
            </td>
            <td>
                string
            </td>
            <td>
                <code>'open'</code>
            </td>
            <td>
                CSS class added to <code>li</code> element when sub-menu is open.
            </td>
        </tr>
        <tr>
            <td>
                enableArrowKeys
            </td>
            <td>
                boolean
            </td>
            <td>
                <code>true</code>
            </td>
            <td>
                Whether or not to allow operation using arrow keys.
            </td>
        </tr>
        <tr>
            <td>
                openOnTab
            </td>
            <td>
                boolean
            </td>
            <td>
                <code>true</code>
            </td>
            <td>
                Whether or not tab focus should open a sub-menu.
            </td>
        </tr>
        <tr>
            <td>
                closeOnHover
            </td>
            <td>
                boolean
            </td>
            <td>
                <code>true</code>
            </td>
            <td>
                If hovering on a menu item should cause other sub-menus to close.
            </td>
        </tr>
        <tr>
            <td>
                menuDirection
            </td>
            <td>
                Array[string]
            </td>
            <td>
                <code>['horizontal', 'vertical']</code>
            </td>
            <td>
                Contains an array of strings that are either <code>'horizontal'</code> or <code>'vertical'</code>. Determines whether menu navigation is vertical or horizontal. Each array item corresponds to a menu-level, the last item will act as a default for deeper levels.
            </td>
        </tr>
    </tbody>
</table>

## Keyboard Support

<table>
    <thead>
        <tr>
            <th>
                Key
            </th>
            <th>
                Function
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Enter
            </td>
            <td>
                Opens the link.<br />
                Opens the sub-menu if link is not present.<br />
                Closes sub-menu if open.
            </td>
        </tr>
        <tr>
            <td>
                Space
            </td>
            <td>
                Opens the sub-menu.<br />
                Closes sub-menu if open.
            </td>
        </tr>
        <tr>
            <td>
                Tab / Shift + Tab
            </td>
            <td>
                Moves focus to the next/previous visible link.
            </td>
        </tr>
        <tr>
            <td>
                Down Arrow (on main menu)<br />
                Right Arrow (on sub-menu)
            </td>
            <td>
                Opens the sub-menu and moves focus to the first containing link.
            </td>
        </tr>
        <tr>
            <td>
                Left Arrow (on main menu)<br />
                Right Arrow (on main menu)<br />
                Up Arrow (on sub-menu)<br />
                Down Arrow (on sub-menu)
            </td>
            <td>
                Moves focus to the next/previous visible link.
            </td>
        </tr>
        <tr>
            <td>
                Escape<br />
                Left Arrow (on sub-menu)
            </td>
            <td>
                Closes sub-menu and moves focus to parent menu item.
            </td>
        </tr>
    </tbody>
</table>

This plugin purposefully does not implement `role="menu"`, `aria-haspopup="true"` or similar ARIA roles as these ATs are not intended to describe navigation menus on a website. Additional keyboard functionality is provided solely as a convenience.</p>

### Further reading

- [Building Accessible Menu Systems — Smashing Magazine](https://www.smashingmagazine.com/2017/11/building-accessible-menu-systems/)