Twenty Twelve: rework navigation to remove need for jQuery and support wp_page_menu markup better. Fixes #21562.

git-svn-id: http://core.svn.wordpress.org/trunk@21611 1a063a9b-81f0-0310-95a4-ce76da25c4cd

functions.php

@@ -104,7 +104,7 @@ function twentytwelve_scripts_styles() {
 	 * JavaScript for handling navigation menus and the resized
 	 * styles for small screen sizes.
 	 */
-	wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20120820', true );
+	wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120824', true );
 
 	/**
 	 * Load special font CSS file.

header.php

@@ -35,10 +35,10 @@
 			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
 		</hgroup>
 
-		<nav class="site-navigation main-navigation" role="navigation">
+		<nav id="site-navigation" class="main-navigation" role="navigation">
 			<h3 class="menu-toggle"><?php _e( 'Show menu', 'twentytwelve' ); ?></h3>
 			<div class="skip-link assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
-			<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
+			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
 		</nav>
 
 		<?php $header_image = get_header_image();

js/navigation.js

@@ -3,14 +3,27 @@
  *
  * Handles toggling the navigation menu for small screens.
  */
+( function() {
+    var button = document.getElementById( 'site-navigation' ).getElementsByTagName( 'h3' )[0],
+        menu   = document.getElementById( 'site-navigation' ).getElementsByTagName( 'ul' )[0];
 
-jQuery( document ).ready( function( $ ) {
+    if ( undefined == button || undefined == menu )
-	if ( ! $( '#masthead .menu' ).children().length ) {
+    	return false;
-		$( '#masthead .menu-toggle' ).hide();
-	}
 
-	$( '.menu-toggle' ).off( 'click' ).click( function() {
+    button.onclick = function() {
-		$( '#masthead .menu' ).stop().slideToggle();
+        if ( -1 == menu.className.indexOf( 'nav-menu' ) )
-		$( this ).toggleClass( 'toggled-on' );
+            menu.className = 'nav-menu';
-	} );
+
-} );
+        if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
+            button.className = button.className.replace( ' toggled-on', '' );
+            menu.className = menu.className.replace( ' toggled-on', '' );
+        } else {
+            button.className += ' toggled-on';
+            menu.className += ' toggled-on';
+        }
+    };
+
+    // Hide menu toggle button if menu is empty.
+    if ( ! menu.childNodes.length )
+        button.style.display = 'none';
+} )();

rtl.css

@@ -55,15 +55,6 @@ td {
 }
 
 
-/* =Basic structure
--------------------------------------------------------------- */
-
-.main-navigation li ul ul {
-	margin-left: 0;
-	margin-right: 40px;
-	margin-right: 2.857142857rem;
-}
-
 /* =Main Content
 ----------------------------------------------- */
 
@@ -220,6 +211,10 @@ label ~ span.required {
 		margin: 0 24px 0;
 		margin: 0 1.714285714rem 0;
 	}
+	.main-navigation ul.nav-menu,
+ 	.main-navigation div.nav-menu > ul {
+		text-align: right;
+	}
 	.main-navigation li {
 		margin-left: 40px;
 		margin-left: 2.857142857rem;

style.css

@@ -1,5 +1,5 @@
 /*
-Theme Name: Twenty Twelve
+13Theme Name: Twenty Twelve
 Theme URI: http://wordpress.org/extend/themes/twentytwelve
 Author: the WordPress team
 Author URI: http://wordpress.org/
@@ -513,10 +513,6 @@ a:hover {
 	margin-top: 1.714285714rem;
 	text-align: center;
 }
-.main-navigation li ul ul {
-	margin-left: 40px;
-	margin-left: 2.857142857rem;
-}
 .main-navigation li {
 	margin-top: 24px;
 	margin-top: 1.714285714rem;
@@ -531,9 +527,11 @@ a:hover {
 .main-navigation a:hover {
 	color: #21759b;
 }
-.main-navigation .menu {
+.main-navigation ul.nav-menu,
+.main-navigation div.nav-menu > ul {
 	display: none;
 }
+.main-navigation ul.nav-menu.toggled-on,
 .menu-toggle {
 	display: inline-block;
 }
@@ -1340,7 +1338,8 @@ img#wpstats {
 		font-size: 1.857142857rem;
 		line-height: 1.846153846;
 	}
-	.main-navigation .menu {
+	.main-navigation ul.nav-menu,
+ 	.main-navigation div.nav-menu > ul {
 		border-bottom: 1px solid #ededed;
 		border-top: 1px solid #ededed;
 		display: inline-block !important;
@@ -1353,16 +1352,15 @@ img#wpstats {
 		margin: 0;
 		text-indent: 0;
 	}
-	.main-navigation li ul li {
-		padding-left: 0;
-	}
 	.main-navigation li a,
 	.main-navigation li {
 		display: inline-block;
 		text-decoration: none;
 	}
 	.main-navigation li a {
+		border-bottom: 0;
 		color: #6a6a6a;
+		line-height: 3.692307692;
 		text-transform: uppercase;
 	}
 	.main-navigation li a:hover {
@@ -1373,10 +1371,6 @@ img#wpstats {
 		margin: 0 2.857142857rem 0 0;
 		position: relative;
 	}
-	.main-navigation li a {
-		border-bottom: 0;
-		line-height: 3.692307692;
-	}
 	.main-navigation li ul {
 		display: none;
 		margin: 0;
@@ -1386,7 +1380,6 @@ img#wpstats {
 		z-index: 1;
 	}
 	.main-navigation li ul ul {
-		margin-left: 0;
 		top: 0;
 		left: 100%;
 	}
@@ -1548,7 +1541,7 @@ img#wpstats {
 	.site-content nav,
 	.widget-area,
 	img.header-image,
-	nav.site-navigation {
+	.main-navigation {
 		display: none;
 	}
 	.wrapper {