Gamajo Accessible Menu

Making WordPress navigation menus a little more accessible.

Improves menu accessibility in two ways:

• Adds a delay to submenus disappearing when moving the mouse away.
• Makes submenus appear when tabbing through menu items with the keyboard.

Kudos to Rian Rietveld for the original code concept on which this plugin is based. Originally written for Genesis Framework child themes, this should work for all WordPress themes and static sites which follow a typical structure for menus and submenus.

Download

Bower

In your bower.json:

"accessible-menu": "GaryJones/accessible-menu#master"

Change #master to #develop or a specific tag like #1.0.0 if needed.

Standalone

Download the production version or the development version.

Install

WordPress Theme

If using WordPress, and not concatenating it into your main theme JavaScript file, add the following to your theme functions.php:

add_action( 'wp_enqueue_scripts', 'prefix_enqueue_scripts' );
/**
 * Enqueue accessible menu script.
 *
 * @since  1.0.0
 */
function prefix_enqueue_scripts() {
    $js_dir = trailingslashit( get_stylesheet_directory_uri() ) . 'js/';
    $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';

    wp_enqueue_script( 'gamajo-accessible-menu', $js_dir . "jquery.accessible-menu{$suffix}.js", array( 'jquery' ), '1.0.0', true );
}

That assumes the minified and non-minified scripts will end up in wp-content/yourtheme/js/.

Now in your main theme JavaScript file, add:

jQuery(function($) {
  $( document ).gamajoAccessibleMenu();
});

Or choose a variant like the Example section below.

Static

In your web page (example):

<script src="jquery.js"></script>
<script src="dist/jquery.accessible-menu.min.js"></script>
<script>
jQuery(function($) {
  $( document ).gamajoAccessibleMenu();
});
</script>

Usage

After enqueueing this file (or concatenating it with your theme JS file), call it with:

$( document ).gamajoAccessibleMenu();

If you want to limit it to only certain menus, then change document to a limited scope, e.g.:

$( '#menu-after-header' ).gamajoAccessibleMenu();

With the default options:

jQuery( document ).gamajoAccessibleMenu({
    hoverClass: 'menu-item-hover',
    hoverDelay: 250,
    menuItemSelector: '.menu-item'
});

CSS

All this plugin does is add and remove the classes. You will still need to add CSS for the .menu-item-hover selector to make submenus appear when that selector is present.

In Genesis Framework child themes, you might have something like:

.menu-item:hover {
    position: static;
}

.menu-item:hover > .sub-menu {
    left: auto;
    opacity: 1;
}

That can be updated to:

.menu-item:hover,
.menu-item-hover,
.menu-item:focus {
    position: static;
}

.menu-item:hover > .sub-menu,
.menu-item-hover > .sub-menu,
.menu-item:focus > .sub-menu {
    left: auto;
    opacity: 1;
}

Options

hoverClass

Default: 'menu-item-hover'
The CSS class to add to indicate item is hovered or focused.

hoverDelay

Default: 250
The delay in milliseconds to keep submenus showing after mouse leaves.

menuItemSelector

Default: '.menu-item'
Selector for general menu items. If you remove the default menu item classes, then you may want to call this plugin with this value set to something like 'nav li' or '.menu li'.

Release History

1.0.0

• First public release.