Pique: Updated SHOW MORE nav item to open on click

This listens for either a click event or a touch event, depending on the
user's device, to toggle the 'Show More' navigation. This will no longer
open on hover, to remain consistent with the behavior on all
viewport widths.

Fixes #109.

pique/assets/js/navigation.js

@@ -38,31 +38,31 @@
 	 * Toggles `focus` class to allow submenu access on tablets.
 	 */
 	( function( container ) {
-		var touchStartFn, i,
+		var toggleNav, i,
 			parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
 
-		if ( 'ontouchstart' in window ) {
-			touchStartFn = function( e ) {
-				var menuItem = this.parentNode, i;
+		toggleNav = function( e ) {
+			var menuItem = this.parentNode, i;
 
-				if ( ! menuItem.classList.contains( 'focus' ) ) {
-					e.preventDefault();
-					for ( i = 0; i < menuItem.parentNode.children.length; ++i ) {
-						if ( menuItem === menuItem.parentNode.children[i] ) {
-							continue;
-						}
-						menuItem.parentNode.children[i].classList.remove( 'focus' );
+			if ( ! menuItem.classList.contains( 'focus' ) ) {
+				e.preventDefault();
+				for ( i = 0; i < menuItem.parentNode.children.length; ++i ) {
+					if ( menuItem === menuItem.parentNode.children[i] ) {
+						continue;
 					}
-					menuItem.classList.add( 'focus' );
-				} else {
-					menuItem.classList.remove( 'focus' );
+					menuItem.parentNode.children[i].classList.remove( 'focus' );
 				}
-			};
+				menuItem.classList.add( 'focus' );
+			} else {
+				menuItem.classList.remove( 'focus' );
+			}
+		};
 
+		// if ( window.matchMedia( "( max-width: 767px )" ).matches ) {
 			for ( i = 0; i < parentLink.length; ++i ) {
-				parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
+				parentLink[i].addEventListener( ( 'ontouchstart' in window ? 'touchstart' : 'click' ), toggleNav, false );
 			}
-		}
+		// }
 	}( container ) );
 
 } )( jQuery );

pique/style.css

@@ -1106,32 +1106,43 @@ a:active {
 		left: 103%;
 		left: calc(100% + 5px);
 	}
+	.main-navigation #primary-menu > li.focus > ul,
 	.main-navigation #primary-menu > li:nth-last-child(1):hover > ul,
 	.main-navigation #primary-menu > li:nth-last-child(2):hover > ul {
 		left: auto;
 		right: 5%;
 	}
+	.main-navigation #primary-menu > li.focus ul::before,
 	.main-navigation #primary-menu > li:nth-last-child(1):hover ul::before,
 	.main-navigation #primary-menu > li:nth-last-child(2):hover ul::before {
 		left: auto;
 		right: 15px;
 	}
+	.main-navigation #primary-menu > li.focus li:hover ul,
 	.main-navigation #primary-menu > li:nth-last-child(1) li:hover ul,
 	.main-navigation #primary-menu > li:nth-last-child(2) li:hover ul {
 		left: auto;
 		right: 103%;
 		right: calc(100% + 5px);
 	}
+	.main-navigation #primary-menu > li.focus li:hover ul::before,
 	.main-navigation #primary-menu > li:nth-last-child(1) li:hover ul::before,
 	.main-navigation #primary-menu > li:nth-last-child(2) li:hover ul::before {
 		left: auto;
 		right: -8px;
 	}
+	.main-navigation #primary-menu > li.focus li:hover ul::after,
 	.main-navigation #primary-menu > li:nth-last-child(1) li:hover ul::after,
 	.main-navigation #primary-menu > li:nth-last-child(2) li:hover ul::after {
 		left: auto;
 		right: -15px;
 	}
+
+	.main-navigation #primary-menu > li.visible:not(.focus):hover > ul {
+		left: -999em;
+		right: auto;
+	}
+
 	/* Sticky menu */
 	.sticky {
 		bottom: auto;