_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

@@ -99,4 +99,13 @@ function _s_widgets_init() {
 		'after_title' => '</h1>',
 	) );
 }
-add_action( 'init', '_s_widgets_init' );
+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' );

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();
+	}
+
+} );

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
 ----------------------------------------------- */