From 91511b6a18098a27fa7b6b2ff53a207e9dd1458d Mon Sep 17 00:00:00 2001
From: Lance Willett <lancewillett@git.wordpress.org>
Date: Tue, 28 Feb 2012 03:59:47 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@20007 602fd350-edb4-49c9-b593-d223f7449a82
---
 wp-content/themes/twentytwelve/functions.php  | 11 +++++
 wp-content/themes/twentytwelve/header.php     |  7 ++--
 .../themes/twentytwelve/js/navigation.js      | 41 +++++++++++++++++++
 wp-content/themes/twentytwelve/style.css      | 20 +++++++++
 4 files changed, 75 insertions(+), 4 deletions(-)
 create mode 100644 wp-content/themes/twentytwelve/js/navigation.js

diff --git a/wp-content/themes/twentytwelve/functions.php b/wp-content/themes/twentytwelve/functions.php
index bd1bee2a40..06fbe81de9 100644
--- a/wp-content/themes/twentytwelve/functions.php
+++ b/wp-content/themes/twentytwelve/functions.php
@@ -187,6 +187,17 @@ function twentytwelve_admin_header_image() { ?>
 <?php }
 endif;
 
+/**
+ * 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.
  *
diff --git a/wp-content/themes/twentytwelve/header.php b/wp-content/themes/twentytwelve/header.php
index 025b76faa0..9035249beb 100644
--- a/wp-content/themes/twentytwelve/header.php
+++ b/wp-content/themes/twentytwelve/header.php
@@ -40,10 +40,9 @@ wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );
 			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
 		</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>
 
diff --git a/wp-content/themes/twentytwelve/js/navigation.js b/wp-content/themes/twentytwelve/js/navigation.js
new file mode 100644
index 0000000000..187f0f766c
--- /dev/null
+++ b/wp-content/themes/twentytwelve/js/navigation.js
@@ -0,0 +1,41 @@
+/**
+ * navigation.js
+ *
+ * Handles toggling the navigation menu for small screens.
+ */
+jQuery( document ).ready( function( $ ) {
+	var masthead = $( '#masthead' ),
+	    timeout = false;
+
+	$.fn.smallMenu = function() {
+		$( masthead ).find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
+		$( masthead ).find( '.site-navigation h3' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );
+
+		$( '.menu-toggle' ).click( function() {
+			$( masthead ).find( '.menu' ).toggle();
+			$( this ).toggleClass( 'toggled-on' );
+		} );
+	};
+
+	// Check viewport width on first load.
+	if ( $( window ).width() < 600 )
+		$.fn.smallMenu();
+
+	// Check viewport width when user resizes the browser window.
+	$( window ).resize( function() {
+		var browserWidth = $( window ).width();
+
+		if ( false !== timeout )
+			clearTimeout( timeout );
+
+		timeout = setTimeout( function() {
+			if ( browserWidth < 600 ) {
+				$.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 );
+	} );
+} );
\ No newline at end of file
diff --git a/wp-content/themes/twentytwelve/style.css b/wp-content/themes/twentytwelve/style.css
index 70e3a0f86b..f23cddc682 100644
--- a/wp-content/themes/twentytwelve/style.css
+++ b/wp-content/themes/twentytwelve/style.css
@@ -340,6 +340,26 @@ nav[role="navigation"] li ul li a {
 	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;
+	}
+}
+
 /*---------------------------------------------------------
 Banner
 ------------------------------------------------------------ */