rayelliott
/
_s
Archived
forked from mirror/_s
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

_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
This commit is contained in:
Ian Stewart 2012-02-06 16:40:54 +00:00
parent e1f35edffb
commit 4f3d984c7c
3 changed files with 46 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
functions.php
View File

@ -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' );

28
js/small-menu.js Normal file
View File

@ -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();
}
} );

8
style.css
View File

@ -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
----------------------------------------------- */