First pass at fixing drop-down menus for touch

This patch allows the user to view a site on a touch screen tablet and
access child menus by clicking on the parent once, or access the parent
by clicking on it twice. Props @iamtakashi for the original fix.

js/navigation.js

@@ -41,4 +41,35 @@
 			menu.setAttribute( 'aria-expanded', 'true' );
 		}
 	};
+	
+	// Fix child menus for touch devices.
+	function fixMenuTouchTaps( container ) {
+		var touchStartFn,
+		    parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
+
+		if ( 'ontouchstart' in window ) {
+			touchStartFn = function( e ) {
+				var menuItem = this.parentNode;
+
+				if ( ! menuItem.classList.contains( 'focus' ) ) {
+					e.preventDefault();
+					for( var i = 0; i < menuItem.parentNode.children.length; ++i ) {
+						if ( menuItem === menuItem.parentNode.children[i] ) {
+							continue;
+						}
+						menuItem.parentNode.children[i].classList.remove( 'focus' );
+					}
+					menuItem.classList.add( 'focus' );
+				} else {
+					menuItem.classList.remove( 'focus' );
+				}
+			};
+
+			for ( var i = 0; i < parentLink.length; ++i ) {
+				parentLink[i].addEventListener( 'touchstart', touchStartFn, false )
+			}
+		}
+	}
+
+	fixMenuTouchTaps( container );
 } )();

style.css

@@ -476,11 +476,13 @@ a:active {
 .main-navigation ul ul a:hover {
 }
 
-.main-navigation ul li:hover > ul {
+.main-navigation ul li:hover > ul,
+.main-navigation ul li.focus > ul { {
 	left: auto;
 }
 
-.main-navigation ul ul li:hover > ul {
+.main-navigation ul ul li:hover > ul,
+.main-navigation ul ul li.focus > ul {
 	left: 100%;
 }