Merge pull request #111 from Automattic/109-fix_nav_show_more

Pique: Updated SHOW MORE nav item to open on click

pique/assets/js/navigation.js

@@ -38,30 +38,28 @@
 	 * 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' );
 				}
-			};
-
-			for ( i = 0; i < parentLink.length; ++i ) {
-				parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
+				menuItem.classList.add( 'focus' );
+			} else {
+				menuItem.classList.remove( 'focus' );
 			}
+		};
+
+		for ( i = 0; i < parentLink.length; ++i ) {
+			parentLink[i].addEventListener( ( 'ontouchstart' in window ? 'touchstart' : 'click' ), toggleNav, false );
 		}
 	}( container ) );
 

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;