Ticket #21562: 21562.9.diff

wp-content/themes/twentytwelve/style.css

@@ -513 +513 @@
         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 +527 @@
 .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 +1338 @@
                 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 +1352 @@
                 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 +1371 @@
                 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 +1380 @@
                 z-index: 1;
         }
         .main-navigation li ul ul {
-                margin-left: 0;
                 top: 0;
                 left: 100%;
         }
@@ -1548 +1541 @@
         .site-content nav,
         .widget-area,
         img.header-image,
-        nav.site-navigation {
+        .main-navigation {
                 display: none;
         }
         .wrapper {

wp-content/themes/twentytwelve/js/navigation.js

@@ -3 +3 @@
  *
  * 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 ( ! $( '#masthead .menu' ).children().length ) {
-                $( '#masthead .menu-toggle' ).hide();
-        }
+    if ( undefined == button || undefined == menu )
+        return false;
 
-        $( '.menu-toggle' ).off( 'click' ).click( function() {
-                $( '#masthead .menu' ).stop().slideToggle();
-                $( this ).toggleClass( 'toggled-on' );
-        } );
-} );
- No newline at end of file
+    button.onclick = function() {
+        if ( -1 == menu.className.indexOf( 'nav-menu' ) )
+            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';
+} )();
+ No newline at end of file

wp-content/themes/twentytwelve/header.php

@@ -35 +35 @@
                         <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();

wp-content/themes/twentytwelve/functions.php

@@ -104 +104 @@
          * 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(), '20120820', true );
 
         /**
          * Load special font CSS file.