Accessible Menu

A keyboard-accessible nested menu. Made with Backbone.

by david_i_smith

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>
<h1>Accessible Menu</h1>
<p>A keyboard-accessible nested menu. Should implement the functionality described <a href="http://www.oaa-accessibility.org/examplep/menubar1/" target="_blank">here</a>.</p>
<div id="menu-ctr">
</div>
<script type="text/template" id="menu-item-tpl">
    <a href="<%= href %>"><%= title %></a>
</script>

CSS

.menu-item > .menu {
    display: none;
}
.menu-item > .menu.open {
    display: block;
}

JavaScript

(function ($, _, Backbone) {

    var data = [
        {
            "title": "Font",
            "href": "#",
            "menuItems": [
                {
                    "title": "Sans-serif",
                    "href": "#"
                },
                {
                    "title": "Serif",
                    "href": "#"
                },
                {
                    "title": "Monospace",
                    "href": "#"
                },
                {
                    "title": "Fantasy",
                    "href": "#"
                }
            ]
        },
        {
            "title": "Style",
            "href": "#",
            "menuItems": [
                {
                    "title": "Italics",
                    "href": "#"
                },
                {
                    "title": "Bold",
                    "href": "#"
                },
                {
                    "title": "Underlined",
                    "href": "#"
                }
            ]
        },
        {
            "title": "Justification",
            "href": "#",
            "menuItems": [
                {
                    "title": "Left",
                    "href": "#"
                },
                {
                    "title": "Centered",
                    "href": "#"
                },
                {
                    "title": "Right",
                    "href": "#"
                },
                {
                    "title": "Justified",
                    "href": "#"
                }
            ]
        }
    ];
    
    var BaseView = Backbone.View.extend({
        keyCodes: {
            '13':     'enter',
            '32':     'space',
            '37':     'left',
            '38':     'up',
            '39':     'right',
            '40':     'down'
        },
        events: {
            'focus':    'onFocus',
            'keydown':  'onKeydown'
        },
        onFocus: function (e)...