Smart Menus Accessible

by maryjames0

HTML

<ul id="main-menu" class="sm sm-blue collapsed">           
              <li><a href="/page-one">Top Level One</a>     
                <ul>
                  <li><a href="/one-one">1.1</a></li>
                  <li><a href="/one-two">1.2</a>
         	        <ul>       
         	          <li><a href="/one-two-one">1.2.1</a></li>      
         	          <li><a href="/one-two-two">1.2.2</a></li>                           
                    </ul>                  
                  </li>
                  <li><a href="/one-three">1.3</a></li>
                </ul>
              </li> 
              <li><a href="/page-two">Top Level Two</a>     
                <ul>
                  <li><a href="/two-one">2.1</a></li>
                  <li><a href="/two-two">2.2</a></li>
                  <li><a href="/two-three">2.3</a></li>
                </ul>
              </li> 
              <li><a href="/page-three">Top Level Three</a>     
                <ul>
                  <li><a href="/three-one">3.1</a></li>
                  <li><a href="/three-two">3.2</a>
         	        <ul>       
         	          <li><a href="/three-two-one">3.2.1</a></li>      
         	          <li><a href="/three-two-two">3.2.2</a>
                        <ul>
                          <li><a href="/three-two-two-one">3.2.2.1</a></li>
                          <li><a href="/three-two-two-two">3.2.2.2</a></li>
                          <li><a href="/three-two-two-three">3.2.2.3</a></li>
                        </ul>
                      </li>  
         	          <li><a href="/three-two-three">3.2.3</a></li>                         
                    </ul>                  
                  </li>
                  <li><a href="/three-three">3.3</a></li>
                </ul>
              </li> 
            </ul>

CSS

/*********************************************************/
/*****************NAVIGATION - MAIN***********************/
/*********************************************************/
#main-menu {text-align:left; margin-top: 45px!important;}
#main-menu ul {text-align:left;}
#main-menu > li {display:block; margin-right:0;}

.sm,.sm ul,.sm li{display:block;list-style:none;margin:0;padding:0; direction:ltr;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.sm ul{display:none;}
.sm-blue > li {border-bottom: #004169 1px solid;}
.sm li,.sm a{position:relative;}
/*.sm li.responsive-only {display: block;}*/
.sm a{display:block;}
.sm:after{content:"\00a0";display:block;height:0;font:0px/0 serif;clear:both;visibility:hidden;overflow:hidden;}
.sm,.sm *,.sm *:before,.sm *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}

.sm-blue {background: transparent;}
.sm-blue a, .sm-blue a:hover {padding: 10px 20px; /* make room for the toggle button (sub indicator) */ padding-right: 58px; font-family: myriad-pro, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: 0.9px; text-transform: uppercase; text-decoration: none; color: #3c4e5a!important; background: #f7f7f7;}


.sm-blue a.current {background: #006892; color: white;}

.sm-blue a span.sub-arrow {position: absolute; top: 50%; margin-top: -17px; left: auto; right: 4px; width: 34px; height: 34px; overflow: hidden; font: bold 16px/34px monospace !important; text-align: center; text-shadow: none; /* background: rgba(0, 0, 0, 0.1); */  } 
.sm-blue a.highlighted span.sub-arrow:before {display: block; content: '-';}


.sm-blue ul {background: white;}
.sm-blue ul a, .sm-blue ul a:hover {background: transparent; color: #2A3F52; font-size: 16px; text-shadow: none; border-left: 8px solid transparent;}
.sm-blue ul a.current {background: #006892; color: white;}
/*.sm-blue ul li {border-top: 1px solid rgba(0, 0, 0, 0.05);} This line was removed to get rid of the grey border at the top of each submenu item...

JavaScript

/*!
 * SmartMenus jQuery Plugin - v1.0.0-beta1 - June 1, 2015
 * http://www.smartmenus.org/
 *
 * Copyright 2015 Vasil Dinkov, Vadikom Web Ltd.
 * http://vadikom.com
 *
 * Licensed MIT
 */

(function($) {

	var menuTrees = [],
		IE = !!window.createPopup, // detect it for the iframe shim
		mouse = false, // optimize for touch by default - we will detect for mouse input
		mouseDetectionEnabled = false;

	// Handle detection for mouse input (i.e. desktop browsers, tablets with a mouse, etc.)
	function initMouseDetection(disable) {
		var eNS = '.smartmenus_mouse';
		if (!mouseDetectionEnabled && !disable) {
			// if we get two consecutive mousemoves within 2 pixels from each other and within 300ms, we assume a real mouse/cursor is present
			// in practice, this seems like impossible to trick unintentianally with a real mouse and a pretty safe detection on touch devices (even with older browsers that do not support touch events)
			var firstTime = true,
				lastMove = null;
			$(document).bind(getEventsNS([
				['mousemove', function(e) {
					var thisMove = { x: e.pageX, y: e.pageY, timeStamp: new Date().getTime() };
					if (lastMove) {
						var deltaX = Math.abs(lastMove.x - thisMove.x),
							deltaY = Math.abs(lastMove.y - thisMove.y);
	 					if ((deltaX > 0 || deltaY > 0) && deltaX <= 2 && deltaY <= 2 && thisMove.timeStamp - lastMove.timeStamp <= 300) {
							mouse = true;
							// if this is the first check after page load, check if we are not over some item by chance and call the mouseenter handler if yes
							if (firstTime) {
								var $a = $(e.target).closest('a');
								if ($a.is('a')) {
									$.each(menuTrees, function() {
										if ($.contains(this.$root[0], $a[0])) {
											this.itemEnter({ currentTarget: $a[0] });
											return false;
										}
									});
								}
								firstTime = false;
							}
						}
					}
					lastMove = thisMove;
				}],
				[touchEvents() ? 'touchstart' : 'pointerover pointermove pointerout...