From 4f3d984c7ca1af19cf3cfe6561f0356e97ace505 Mon Sep 17 00:00:00 2001
From: Ian Stewart <ian@iandanielstewart.com>
Date: Mon, 6 Feb 2012 16:40:54 +0000
Subject: [PATCH] _s: Simple script for changing the classes of the main menu
 based on browser width let's you easily restyle a menu for small screens
 without changing the markup

git-svn-id: https://wpcom-themes.svn.automattic.com/_s/@8868 d957f892-c61d-0410-b221-f235e6eecf30
---
 functions.php    | 11 ++++++++++-
 js/small-menu.js | 28 ++++++++++++++++++++++++++++
 style.css        |  8 ++++++++
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 js/small-menu.js

diff --git a/functions.php b/functions.php
index e3c29a1..3a09eef 100644
--- a/functions.php
+++ b/functions.php
@@ -99,4 +99,13 @@ function _s_widgets_init() {
 		'after_title' => '</h1>',
 	) );
 }
-add_action( 'init', '_s_widgets_init' );
\ No newline at end of file
+add_action( 'init', '_s_widgets_init' );
+
+/**
+ * Enqueue scripts
+ */
+function _s_scripts() {
+	wp_enqueue_script( 'jquery' );
+	wp_enqueue_script( 'small-menu', get_template_directory_uri() . '/js/small-menu.js', 'jquery', '20120206', true );
+}
+add_action( 'wp_enqueue_scripts', '_s_scripts' );
diff --git a/js/small-menu.js b/js/small-menu.js
new file mode 100644
index 0000000..5f17b10
--- /dev/null
+++ b/js/small-menu.js
@@ -0,0 +1,28 @@
+jQuery( document ).ready( function( $ ) {
+	var $browserWidth = $( window ).width();
+
+	$.fn.smallMenu = function() {
+		$( '#masthead .site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
+		$( '#masthead .site-navigation h1' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );
+
+		$( '.menu-toggle' ).click( function () {
+			$( '#masthead .menu' ).toggle( 'fast' );
+		});
+	}
+
+	$(window).resize(function() {
+		var $browserWidth = $( window ).width();
+
+		if ( $browserWidth < 600 ) {
+			$.fn.smallMenu();
+		} else {
+			$( '#masthead .site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
+			$( '#masthead .site-navigation h1' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
+		}
+	});
+
+	if ( $browserWidth < 600 ) {
+		$.fn.smallMenu();
+	}
+
+} );
\ No newline at end of file
diff --git a/style.css b/style.css
index 89c778f..b6f354f 100644
--- a/style.css
+++ b/style.css
@@ -384,6 +384,14 @@ a:active {
 .main-navigation li.current-menu-item a {
 }
 
+/* Small menu */
+.menu-toggle {
+	cursor: pointer;
+}
+.main-small-navigation .menu {
+	display: none;
+}
+
 
 /* =Content
 ----------------------------------------------- */