1/** 2 * Handles toggling the main navigation menu for small screens. 3 */ 4jQuery( document ).ready( function( $ ) { 5 var $masthead = $( '#masthead' ), 6 timeout = false; 7 8 $.fn.smallMenu = function() { 9 $masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' ); 10 $masthead.find( '.site-navigation h1' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' ); 11 12 $( '.menu-toggle' ).unbind( 'click' ).click( function() { 13 $masthead.find( '.menu' ).toggle(); 14 $( this ).toggleClass( 'toggled-on' ); 15 } ); 16 }; 17 18 // Check viewport width on first load. 19 if ( $( window ).width() < 600 ) 20 $.fn.smallMenu(); 21 22 // Check viewport width when user resizes the browser window. 23 $( window ).resize( function() { 24 var browserWidth = $( window ).width(); 25 26 if ( false !== timeout ) 27 clearTimeout( timeout ); 28 29 timeout = setTimeout( function() { 30 if ( browserWidth < 600 ) { 31 $.fn.smallMenu(); 32 } else { 33 $masthead.find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' ); 34 $masthead.find( '.site-navigation h1' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' ); 35 $masthead.find( '.menu' ).removeAttr( 'style' ); 36 } 37 }, 200 ); 38 } ); 39} );