Changeset 21554

Timestamp:

08/20/2012 06:35:33 PM (8 years ago)

Author:

lancewillett

Message:

Twenty Twelve: improve navigation to be mobile-first and not rely on JS for hiding and showing, props obenland for patches. See #21562.

Location:

trunk/wp-content/themes/twentytwelve

Files:

• functions.php (modified) (1 diff)
• header.php (modified) (1 diff)
• js/navigation.js (moved) (moved from trunk/wp-content/themes/twentytwelve/js/theme.js) (1 diff)
• style.css (modified) (3 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/theme.js', array( 'jquery' ), '20120802', true );
+    wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20120820', true );
 
     /**

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

@@ -37 +37 @@
 
         <nav class="site-navigation main-navigation" role="navigation">
-            <h3 class="assistive-text"><?php _e( 'Show navigation', 'twentytwelve' ); ?></h3>
+            <h3 class="menu-toggle"><?php _e( 'Show navigation', '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' ) ); ?>

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

@@ -6 +6 @@
 
 jQuery( document ).ready( function( $ ) {
-    var masthead = $( '#masthead' ),
-        largeWindow = window.matchMedia( 'screen and (min-width: 600px)' ),
-        timeout = false;
+    if ( $( '#masthead .menu' ).children().length ) {
+        $( '#masthead h3.assistive-text' ).addClass( 'menu-toggle' );
+    }
 
-    $.fn.smallMenu = function() {
-        if ( ! masthead.find( '.menu' ).children().length ) {
-            $( '.menu-toggle' ).remove();
-            return;
-        }
-
-        masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
-        masthead.find( '.site-navigation h3' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );
-
-        $( '.menu-toggle' ).off( 'click' ).click( function() {
-            masthead.find( '.menu' ).stop().slideToggle();
-            $( this ).toggleClass( 'toggled-on' );
-        } );
-    };
-
-    // Check viewport width on first load.
-    if ( ! largeWindow.matches )
-        $.fn.smallMenu();
-
-    // Check viewport width when user resizes the browser window.
-    $( window ).resize( function() {
-        if ( false !== timeout )
-            clearTimeout( timeout );
-
-        timeout = setTimeout( function() {
-            if ( ! largeWindow.matches ) {
-                $.fn.smallMenu();
-            } else {
-                masthead.find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
-                masthead.find( '.site-navigation h3' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
-                masthead.find( '.menu' ).removeAttr( 'style' );
-            }
-        }, 200 );
+    $( '.menu-toggle' ).off( 'click' ).click( function() {
+        $( '#masthead .menu' ).stop().slideToggle();
+        $( this ).toggleClass( 'toggled-on' );
     } );
 } );

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

@@ -509 +509 @@
 
 /* Navigation Menu */
-.main-navigation .menu {
-    display: inline-block;
-    margin-top: 24px;
-    margin-top: 1.714285714rem;
-    width: 100%;
-    font-size: 12px;
-    font-size: 0.857142857rem;
-    border-top: 1px solid #ededed;
-    border-bottom: 1px solid #ededed;
-}
-.main-navigation ul {
-    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 {
-    text-transform: uppercase;
-    color: #6a6a6a;
-}
-.main-navigation li a:hover {
-    color: #000;
-}
-.main-navigation li {
-    margin-right: 40px;
-    margin-right: 2.857142857rem;
-    position: relative;
-}
-.main-navigation li a {
-    border-bottom: 0;
-    line-height: 3.692307692;
-}
-.main-navigation li ul {
-    display: none;
-    position: absolute;
-    top: 100%;
-    padding: 0;
-    margin: 0;
-    z-index: 1;
-}
-.main-navigation li ul ul {
-    top: 0;
-    left: 100%;
-}
-.main-navigation ul li:hover > ul {
-    display: block;
-    border-left: 0;
-}
-.main-navigation li ul li,
-.main-navigation li ul li a {
-    text-align: center;
-}
-.main-navigation li ul li a {
-    background: #efefef;
-    border-bottom: 1px solid #ededed;
-    display: block;
-    font-size: 11px;
-    font-size: 0.785714286rem;
-    line-height: 2.181818182;
-    padding: 8px 10px;
-    padding: 0.571428571rem 0.714285714rem;
-    width: 120px;
-    width: 8.571428571rem;
-}
-.main-navigation li ul li a:hover {
-    background: #e3e3e3;
-    color: #444;
-}
-.main-navigation .current-menu-item > a,
-.main-navigation .current-menu-ancestor > a,
-.main-navigation .current_page_item > a,
-.main-navigation .current_page_ancestor > a {
-    color: #636363;
-    font-weight: bold;
-}
-nav[role="navigation"].main-small-navigation {
+.main-navigation {
     margin-top: 24px;
     margin-top: 1.714285714rem;
     text-align: center;
 }
-nav[role="navigation"].main-small-navigation li {
+.main-navigation li {
     margin-top: 24px;
     margin-top: 1.714285714rem;
@@ -603 +522 @@
     float: none;
 }
-nav[role="navigation"].main-small-navigation a {
+.main-navigation a {
     color: #5e5e5e;
 }
-nav[role="navigation"].main-small-navigation a:hover {
+.main-navigation a:hover {
     color: #21759b;
+}
+.main-navigation .menu {
+    display: none;
 }
 .menu-toggle {
     display: inline-block;
-}
-.main-small-navigation .menu {
-    display: none;
 }
 
@@ -1414 +1333 @@
         line-height: 1.846153846;
     }
+    .main-navigation .menu {
+        border-bottom: 1px solid #ededed;
+        border-top: 1px solid #ededed;
+        display: inline-block !important;
+        font-size: 12px;
+        font-size: 0.857142857rem;
+        text-align: left;
+        width: 100%;
+    }
+    .main-navigation ul {
+        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 {
+        color: #6a6a6a;
+        text-transform: uppercase;
+    }
+    .main-navigation li a:hover {
+        color: #000;
+    }
+    .main-navigation li {
+        margin: 0 40px 0 0;
+        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;
+        padding: 0;
+        position: absolute;
+        top: 100%;
+        z-index: 1;
+    }
+    .main-navigation li ul ul {
+        top: 0;
+        left: 100%;
+    }
+    .main-navigation ul li:hover > ul {
+        border-left: 0;
+        display: block;
+    }
+    .main-navigation li ul li a {
+        background: #efefef;
+        border-bottom: 1px solid #ededed;
+        display: block;
+        font-size: 11px;
+        font-size: 0.785714286rem;
+        line-height: 2.181818182;
+        padding: 8px 10px;
+        padding: 0.571428571rem 0.714285714rem;
+        width: 120px;
+        width: 8.571428571rem;
+    }
+    .main-navigation li ul li a:hover {
+        background: #e3e3e3;
+        color: #444;
+    }
+    .main-navigation .current-menu-item > a,
+    .main-navigation .current-menu-ancestor > a,
+    .main-navigation .current_page_item > a,
+    .main-navigation .current_page_ancestor > a {
+        color: #636363;
+        font-weight: bold;
+    }
+    .menu-toggle {
+        display: none;
+    }
     .entry-header .entry-title {
         font-size: 22px;