forked from mirror/_s
_s: rework nav JS file a bit
* Remove top-level browser width variable, only needed in one internal function * Add timeout so that the resize action doesn't constantly trigger, instead give it a short delay to anticipate the user finishing the window size change * Better comments * Incorporate mattwiebe fix for calling jQuery objects incorrectly, see http://core.trac.wordpress.org/ticket/20131 git-svn-id: https://wpcom-themes.svn.automattic.com/_s/@9026 d957f892-c61d-0410-b221-f235e6eecf30
This commit is contained in:
parent
94ac5caf18
commit
9fbba4ff7d
|
@ -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 );
|
||||
} );
|
||||
} );
|
Reference in New Issue