Merge pull request #66 from kovshenin/patch-8

Replace small-menu.js with navigation.js inspired by Twenty Twelve.

functions.php

@@ -138,7 +138,7 @@ function _s_widgets_init() {
 function _s_scripts() {
 	wp_enqueue_style( 'style', get_stylesheet_uri() );
 
-	wp_enqueue_script( 'small-menu', get_template_directory_uri() . '/js/small-menu.js', array( 'jquery' ), '20120206', true );
+	wp_enqueue_script( 'navigation', get_template_directory_uri() . '/js/navigation.js', null, '20120206', true );
 
 	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
 		wp_enqueue_script( 'comment-reply' );

header.php

@@ -31,8 +31,8 @@
 			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
 		</hgroup>
 
-		<nav role="navigation" class="site-navigation main-navigation">
-			<h1 class="assistive-text"><?php _e( 'Menu', '_s' ); ?></h1>
+		<nav role="navigation" class="site-navigation main-navigation" id="site-navigation">
+			<h1 class="menu-toggle"><?php _e( 'Menu', '_s' ); ?></h1>
 			<div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', '_s' ); ?>"><?php _e( 'Skip to content', '_s' ); ?></a></div>
 
 			<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

js/navigation.js

@@ -0,0 +1,32 @@
+/**
+ * navigation.js
+ *
+ * Handles toggling the navigation menu for small screens.
+ */
+( function() {
+	var button    = document.getElementById( 'site-navigation' ).getElementsByTagName( 'h1' )[0],
+	    menu      = document.getElementById( 'site-navigation' ).getElementsByTagName( 'ul' )[0];
+	    container = document.getElementById( 'site-navigation' );
+
+	if ( undefined == button || undefined == menu )
+		return false;
+
+	button.onclick = function() {
+		if ( -1 == menu.className.indexOf( 'nav-menu' ) )
+			menu.className = 'nav-menu';
+
+		if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
+			button.className = button.className.replace( ' toggled-on', '' );
+			menu.className = menu.className.replace( ' toggled-on', '' );
+			container.className = container.className.replace( ' main-small-navigation', ' main-navigation' );
+		} else {
+			button.className += ' toggled-on';
+			menu.className += ' toggled-on';
+			container.className = container.className.replace( ' main-navigation', ' main-small-navigation' );
+		}
+	};
+
+	// Hide menu toggle button if menu is empty.
+	if ( ! menu.childNodes.length )
+		button.style.display = 'none';
+} )();

style.css

@@ -403,12 +403,24 @@ a:active {
 
 /* Small menu */
 .menu-toggle {
+	display: none;
 	cursor: pointer;
 }
-.main-small-navigation .menu {
+
+.main-small-navigation ul {
 	display: none;
 }
 
+@media screen and (max-width: 600px) {
+	.menu-toggle,
+	.main-small-navigation ul.nav-menu.toggled-on {
+		display: block;
+	}
+
+	.main-navigation ul {
+		display: none;
+	}
+}
 
 /* =Content
 ----------------------------------------------- */