diff --git a/js/small-menu.js b/js/small-menu.js index d0e5a3cb..28b34306 100644 --- a/js/small-menu.js +++ b/js/small-menu.js @@ -1,31 +1,39 @@ +/** + * Handles toggling the main navigation menu for small screens. + */ jQuery( document ).ready( function( $ ) { - var $browserWidth = $( window ).width(); - var $masthead = $( '#masthead' ); + var $masthead = $( '#masthead' ), + timeout = false; $.fn.smallMenu = function() { - $( $masthead ).find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' ); - $( $masthead ).find( '.site-navigation h1' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' ); + $masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' ); + $masthead.find( '.site-navigation h1' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' ); - $( '.menu-toggle' ).click( function () { - $( $masthead ).find( '.menu' ).toggle(); + $( '.menu-toggle' ).click( function() { + $masthead.find( '.menu' ).toggle(); $( this ).toggleClass( 'toggled-on' ); - }); - } + } ); + }; - $(window).resize(function() { - var $browserWidth = $( window ).width(); - - if ( $browserWidth < 600 ) { - $.fn.smallMenu(); - } else { - $( $masthead ).find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' ); - $( $masthead ).find( '.site-navigation h1' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' ); - $( $masthead ).find( '.menu' ).removeAttr( 'style' ); - } - }); - - if ( $browserWidth < 600 ) { + // 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 h1' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' ); + $masthead.find( '.menu' ).removeAttr( 'style' ); + } + }, 200 ); + } ); } ); \ No newline at end of file