golem
/
twentyGOLEM
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Twenty Twelve: add support for toggling the navigation menu in small screens. See #19978. 

Triggered when a viewport is under 600 pixels wide. This functionality depends on JS being enabled, and will naturally fall back to a normal, expanded menu for a client without JS.

Props iandstewart for the original JS file and concept.


git-svn-id: http://svn.automattic.com/wordpress/trunk@20007 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
lancewillett 2012-02-28 03:59:47 +00:00
parent 9a4874ec7a
commit a044beab6a
4 changed files with 75 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
wp-content/themes/twentytwelve/functions.php
View File

@ -187,6 +187,17 @@ function twentytwelve_admin_header_image() { ?>
<?php }
endif;
/**
* Enqueue script for handling navigation.
*
* @since Twenty Twelve 1.0
*/
function twentytwelve_scripts() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'navigation', get_template_directory_uri() . '/js/navigation.js', 'jquery', '20120227', true );
}
add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts' );
/**
* Get our wp_nav_menu() fallback, wp_page_menu(), to show a home link.
*

7
wp-content/themes/twentytwelve/header.php
View File

@ -40,10 +40,9 @@ wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<nav class="site-navigation" role="navigation">
<h3 class="assistive-text"><?php _e( 'Main menu', 'twentytwelve' ); ?></h3>
<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentytwelve' ); ?>"><?php _e( 'Skip to primary content', 'twentytwelve' ); ?></a></div>
<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentytwelve' ); ?>"><?php _e( 'Skip to secondary content', 'twentytwelve' ); ?></a></div>
<nav class="site-navigation main-navigation" role="navigation">
<h3 class="assistive-text"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<div class="skip-link assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>

41
wp-content/themes/twentytwelve/js/navigation.js Normal file
View File

@ -0,0 +1,41 @@
/**
* navigation.js
*
* Handles toggling the navigation menu for small screens.
*/
jQuery( document ).ready( function( $ ) {
var masthead = $( '#masthead' ),
timeout = false;
$.fn.smallMenu = function() {
$( masthead ).find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
$( masthead ).find( '.site-navigation h3' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );
$( '.menu-toggle' ).click( function() {
$( masthead ).find( '.menu' ).toggle();
$( this ).toggleClass( 'toggled-on' );
} );
};
// 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 h3' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
$( masthead ).find( '.menu' ).removeAttr( 'style' );
}
}, 200 );
} );
} );

20
wp-content/themes/twentytwelve/style.css
View File

@ -340,6 +340,26 @@ nav[role="navigation"] li ul li a {
width: 90px;
}
/* Small menu */
nav[role="navigation"].main-small-navigation {
text-align: left;
}
.menu-toggle {
cursor: pointer;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 1.846153846;
}
.main-small-navigation .menu {
display: none;
}
@media screen and (max-width: 600px) {
nav[role="navigation"] li a {
padding: 8px 0;
line-height: 1.090909091;
}
}
/*---------------------------------------------------------
Banner
------------------------------------------------------------ */