joelhsmith/basic-a11y-menu.html

## basic-a11y-menu.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Basic nav</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        body {
            font-size: 30px;
        }
        /* screen reader only text */
        .sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;}

        /* arrows */
        #myNav button {border: none;background: transparent;}
        #myNav button[aria-expanded]:before {content: "";width: 10px;height: 10px;overflow: hidden;}
        #myNav button[aria-expanded="false"]:before {content:'\2193';}
        #myNav button[aria-expanded="true"]:before {content:'\2191';}

        /* basic menu styles */
        #myNav ul li {display: inline-block;}
        #myNav ul ul {position: absolute;}
        #myNav ul ul li {display: block;}

        /* use aria to control visibility */
        ul[aria-hidden="true"] {display: none;}
        ul[aria-hidden="false"] {display: block;}
    </style>
    <script>
        jQuery(document).ready(function($) {

            function toggleVisibility($toggleTrigger) {
                var state = $toggleTrigger.attr('aria-expanded');
                /* close them all */
                $('button[aria-expanded]').attr('aria-expanded','false').parent().find('ul').attr('aria-hidden','true');
                /* toggle attributes */
                if (state == 'false') {
                    $toggleTrigger.attr('aria-expanded','true').parent().find('ul').attr('aria-hidden','false');
                }
                else if (state = 'true') {
                    $toggleTrigger.attr('aria-expanded','false').parent().find('ul').attr('aria-hidden','true');
                }
            }

            $('#myNav button[aria-expanded]').click(function() {
                var $toggleTrigger = $(this);
                toggleVisibility($toggleTrigger);
            });
            $('#myNav button[aria-expanded]').prev().hover(function() {
                var $toggleTrigger = $(this).parent().find('button[aria-expanded]');
                toggleVisibility($toggleTrigger);
            });
        });
    </script>
  </head>
  <body>
    <h2>Navigation</h2>
    <nav id="myNav">
        <ul role="menubar" aria-label="Main Menu">
            <li>
                <a href="cats.html">Cats</a>
                <button aria-haspopup="true" aria-expanded="false"><span class="sr-only">toggle cats sub nav</span></button>
                <ul aria-hidden="true">
                    <li><a href="calico.html">Calico</a></li>
                    <li><a href="tabby.html">Tabby</a></li>
                </ul>
            </li>
            <li>
                <a href="dogs.html">Dogs</a>
                <button aria-haspopup="true" aria-expanded="false"><span class="sr-only">toggle dogs sub nav</span></button>
                <ul aria-hidden="true">
                    <li><a href="poodles.html">Poodles</a></li>
                    <li><a href="bulldogs.html">Bulldogs</a></li>
                </ul>
            </li>
            <li>
                <a href="birds.html">Birds</a>
                <button aria-haspopup="true" aria-expanded="false"><span class="sr-only">toggle birds sub nav</span></button>
                <ul aria-hidden="true">
                    <li><a href="parrots.html">Parrots</a></li>
                    <li><a href="finches.html">Finches</a></li>
                </ul>
            </li>
        </ul>
    </nav>
  </body>
</html>