Permalink
Browse files

_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
  • Loading branch information...
1 parent e1f35ed commit 4f3d984c7ca1af19cf3cfe6561f0356e97ace505 @ianstewart ianstewart committed Feb 6, 2012
Showing with 46 additions and 1 deletion.
  1. +10 −1 functions.php
  2. +28 −0 js/small-menu.js
  3. +8 −0 style.css
View
@@ -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' );
View
@@ -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();
+ }
+
+} );
View
@@ -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
----------------------------------------------- */

0 comments on commit 4f3d984

Please sign in to comment.