Twenty Eleven: Open submenus on the first tap on touch devices

src/wp-content/themes/twentyeleven/functions.php

@@ -303,10 +303,23 @@ function twentyeleven_setup() {
  * Enqueues scripts and styles for front end.
  *
  * @since Twenty Eleven 2.9
+ * @since Twenty Eleven 5.3 Added navigation script for touch devices.
  */
 function twentyeleven_scripts_styles() {
 	// Theme block stylesheet.
 	wp_enqueue_style( 'twentyeleven-block-style', get_template_directory_uri() . '/blocks.css', array(), '20240703' );
+
+	// Adds JavaScript for opening submenus on touch devices.
+	wp_enqueue_script(
+		'twentyeleven-navigation',
+		get_template_directory_uri() . '/js/navigation.js',
+		array(),
+		'20261028',
+		array(
+			'in_footer' => false,
+			'strategy'  => 'defer',
+		)
+	);
 }
 add_action( 'wp_enqueue_scripts', 'twentyeleven_scripts_styles' );
 

src/wp-content/themes/twentyeleven/js/navigation.js

@@ -0,0 +1,68 @@
+/**
+ * Makes submenus of the main navigation menu usable on touch devices.
+ *
+ * Submenus are only shown on hover, which touch devices emulate
+ * inconsistently. The first tap on a menu item with a submenu opens
+ * the submenu, and a second tap follows the link.
+ */
+( function() {
+	var nav = document.getElementById( 'access' );
+
+	if ( ! nav || ! ( 'ontouchstart' in window ) ) {
+		return;
+	}
+
+	/**
+	 * Closes all open submenus, except the ones containing the given menu item.
+	 *
+	 * @since Twenty Eleven 5.3
+	 *
+	 * @param {Element} [item] Menu item whose submenus stay open.
+	 */
+	function closeSubmenus( item ) {
+		nav.querySelectorAll( '.focus' ).forEach( function( openItem ) {
+			if ( ! item || ! openItem.contains( item ) ) {
+				openItem.classList.remove( 'focus' );
+			}
+		} );
+	}
+
+	/**
+	 * Opens the submenu of a tapped menu item, unless it is already open.
+	 *
+	 * @since Twenty Eleven 5.3
+	 *
+	 * @param {TouchEvent} event Touch event within the menu.
+	 */
+	function onTouchStart( event ) {
+		var link = event.target.closest(
+			'.menu-item-has-children > a, .page_item_has_children > a'
+		);
+
+		if ( ! link || link.parentNode.classList.contains( 'focus' ) ) {
+			return;
+		}
+
+		// Open the submenu instead of following the link.
+		event.preventDefault();
+		closeSubmenus( link.parentNode );
+		link.parentNode.classList.add( 'focus' );
+	}
+
+	// Listen on the container, as the Customizer may re-render the menu.
+	nav.addEventListener( 'touchstart', onTouchStart );
+
+	// Close open submenus when tapping outside the menu.
+	document.addEventListener( 'touchstart', function( event ) {
+		if ( ! nav.contains( event.target ) ) {
+			closeSubmenus();
+		}
+	} );
+
+	// Close submenus when the page is restored from the back/forward cache.
+	window.addEventListener( 'pageshow', function( event ) {
+		if ( event.persisted ) {
+			closeSubmenus();
+		}
+	} );
+} )();

src/wp-content/themes/twentyeleven/style.css

@@ -636,6 +636,7 @@ a.assistive-text:focus,
 	background: #efefef;
 }
 #access li:hover > a,
+#access li.focus > a,
 #access a:focus {
 	background: #f9f9f9; /* Show a solid color for older browsers */
 	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
@@ -644,7 +645,8 @@ a.assistive-text:focus,
 	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
 	color: #373737;
 }
-#access ul li:hover > ul {
+#access ul li:hover > ul,
+#access ul li.focus > ul {
 	display: block;
 }
 #access .current-menu-item > a,