Changeset 20007

Timestamp:

02/28/2012 03:59:47 AM (13 years ago)

Author:

lancewillett

Message:

Twenty Twelve: add support for toggling the navigation menu in small screens. See #19978.

Triggered when a viewport is under 600 pixels wide. This functionality depends on JS being enabled, and will naturally fall back to a normal, expanded menu for a client without JS.

Props iandstewart for the original JS file and concept.

Location:

trunk/wp-content/themes/twentytwelve

Files:

• functions.php (modified) (1 diff)
• header.php (modified) (1 diff)
• js/navigation.js (added)
• style.css (modified) (1 diff)

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

@@ -189 +189 @@
 
 /**
+ * Enqueue script for handling navigation.
+ *
+ * @since Twenty Twelve 1.0
+ */
+function twentytwelve_scripts() {
+    wp_enqueue_script( 'jquery' );
+    wp_enqueue_script( 'navigation', get_template_directory_uri() . '/js/navigation.js', 'jquery', '20120227', true );
+}
+add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts' );
+
+/**
  * Get our wp_nav_menu() fallback, wp_page_menu(), to show a home link.
  *

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

@@ -41 +41 @@
         </hgroup>
 
-        <nav class="site-navigation" role="navigation">
-            <h3 class="assistive-text"><?php _e( 'Main menu', 'twentytwelve' ); ?></h3>
-            <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentytwelve' ); ?>"><?php _e( 'Skip to primary content', 'twentytwelve' ); ?></a></div>
-            <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentytwelve' ); ?>"><?php _e( 'Skip to secondary content', 'twentytwelve' ); ?></a></div>
+        <nav class="site-navigation main-navigation" role="navigation">
+            <h3 class="assistive-text"><?php _e( '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' ) ); ?>
         </nav>

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

@@ -339 +339 @@
     padding: 0.571428571rem 0.857142857rem;
     width: 90px;
+}
+
+/* Small menu */
+nav[role="navigation"].main-small-navigation {
+    text-align: left;
+}
+.menu-toggle {
+    cursor: pointer;
+    font-size: 12px;
+    font-size: 0.857142857rem;
+    line-height: 1.846153846;
+}
+.main-small-navigation .menu {
+    display: none;
+}
+@media screen and (max-width: 600px) {
+    nav[role="navigation"] li a {
+        padding: 8px 0;
+        line-height: 1.090909091;
+    }
 }