Changeset 21611

Timestamp:

08/24/2012 09:07:19 PM (12 years ago)

Author:

lancewillett

Message:

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

Location:

trunk/wp-content/themes/twentytwelve

Files:

• functions.php (modified) (1 diff)
• header.php (modified) (1 diff)
• js/navigation.js (modified) (1 diff)
• rtl.css (modified) (2 diffs)
• style.css (modified) (9 diffs)

trunk/wp-content/themes/twentytwelve/functions.php

@@ -105 +105 @@
      * 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 );
 
     /**

trunk/wp-content/themes/twentytwelve/header.php

@@ -36 +36 @@
         </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>
 

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

@@ -4 +4 @@
  * 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' );
-    } );
-} );
+    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';
+} )();

trunk/wp-content/themes/twentytwelve/rtl.css

@@ -55 +55 @@
 }
 
-
-/* =Basic structure
--------------------------------------------------------------- */
-
-.main-navigation li ul ul {
-    margin-left: 0;
-    margin-right: 40px;
-    margin-right: 2.857142857rem;
-}
 
 /* =Main Content
@@ -221 +212 @@
         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;

trunk/wp-content/themes/twentytwelve/style.css

@@ -1 +1 @@
 /*
-Theme Name: Twenty Twelve
+13Theme Name: Twenty Twelve
 Theme URI: http://wordpress.org/extend/themes/twentytwelve
 Author: the WordPress team
@@ -514 +514 @@
     text-align: center;
 }
-.main-navigation li ul ul {
-    margin-left: 40px;
-    margin-left: 2.857142857rem;
-}
 .main-navigation li {
     margin-top: 24px;
@@ -532 +528 @@
     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;
@@ -1341 +1339 @@
         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;
@@ -1354 +1353 @@
         text-indent: 0;
     }
-    .main-navigation li ul li {
-        padding-left: 0;
-    }
     .main-navigation li a,
     .main-navigation li {
@@ -1363 +1359 @@
     }
     .main-navigation li a {
+        border-bottom: 0;
         color: #6a6a6a;
+        line-height: 3.692307692;
         text-transform: uppercase;
     }
@@ -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 {
@@ -1387 +1381 @@
     }
     .main-navigation li ul ul {
-        margin-left: 0;
         top: 0;
         left: 100%;
@@ -1549 +1542 @@
     .widget-area,
     img.header-image,
-    nav.site-navigation {
+    .main-navigation {
         display: none;
     }