Twenty Twelve: improve navigation to be mobile-first and not rely on JS for hiding and showing, props obenland for patches. See #21562.
git-svn-id: http://core.svn.wordpress.org/trunk@21554 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
d6b658ad7d
commit
4922257922
|
@ -104,7 +104,7 @@ function twentytwelve_scripts_styles() {
|
||||||
* JavaScript for handling navigation menus and the resized
|
* JavaScript for handling navigation menus and the resized
|
||||||
* styles for small screen sizes.
|
* styles for small screen sizes.
|
||||||
*/
|
*/
|
||||||
wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), '20120802', true );
|
wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20120820', true );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Load special font CSS file.
|
* Load special font CSS file.
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
</hgroup>
|
</hgroup>
|
||||||
|
|
||||||
<nav class="site-navigation main-navigation" role="navigation">
|
<nav class="site-navigation main-navigation" role="navigation">
|
||||||
<h3 class="assistive-text"><?php _e( 'Show navigation', 'twentytwelve' ); ?></h3>
|
<h3 class="menu-toggle"><?php _e( 'Show navigation', '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>
|
<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' ) ); ?>
|
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
@ -0,0 +1,16 @@
|
||||||
|
/**
|
||||||
|
* navigation.js
|
||||||
|
*
|
||||||
|
* Handles toggling the navigation menu for small screens.
|
||||||
|
*/
|
||||||
|
|
||||||
|
jQuery( document ).ready( function( $ ) {
|
||||||
|
if ( $( '#masthead .menu' ).children().length ) {
|
||||||
|
$( '#masthead h3.assistive-text' ).addClass( 'menu-toggle' );
|
||||||
|
}
|
||||||
|
|
||||||
|
$( '.menu-toggle' ).off( 'click' ).click( function() {
|
||||||
|
$( '#masthead .menu' ).stop().slideToggle();
|
||||||
|
$( this ).toggleClass( 'toggled-on' );
|
||||||
|
} );
|
||||||
|
} );
|
46
js/theme.js
46
js/theme.js
|
@ -1,46 +0,0 @@
|
||||||
/**
|
|
||||||
* navigation.js
|
|
||||||
*
|
|
||||||
* Handles toggling the navigation menu for small screens.
|
|
||||||
*/
|
|
||||||
|
|
||||||
jQuery( document ).ready( function( $ ) {
|
|
||||||
var masthead = $( '#masthead' ),
|
|
||||||
largeWindow = window.matchMedia( 'screen and (min-width: 600px)' ),
|
|
||||||
timeout = false;
|
|
||||||
|
|
||||||
$.fn.smallMenu = function() {
|
|
||||||
if ( ! masthead.find( '.menu' ).children().length ) {
|
|
||||||
$( '.menu-toggle' ).remove();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
|
|
||||||
masthead.find( '.site-navigation h3' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );
|
|
||||||
|
|
||||||
$( '.menu-toggle' ).off( 'click' ).click( function() {
|
|
||||||
masthead.find( '.menu' ).stop().slideToggle();
|
|
||||||
$( this ).toggleClass( 'toggled-on' );
|
|
||||||
} );
|
|
||||||
};
|
|
||||||
|
|
||||||
// Check viewport width on first load.
|
|
||||||
if ( ! largeWindow.matches )
|
|
||||||
$.fn.smallMenu();
|
|
||||||
|
|
||||||
// Check viewport width when user resizes the browser window.
|
|
||||||
$( window ).resize( function() {
|
|
||||||
if ( false !== timeout )
|
|
||||||
clearTimeout( timeout );
|
|
||||||
|
|
||||||
timeout = setTimeout( function() {
|
|
||||||
if ( ! largeWindow.matches ) {
|
|
||||||
$.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 );
|
|
||||||
} );
|
|
||||||
} );
|
|
174
style.css
174
style.css
|
@ -508,93 +508,12 @@ a:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navigation Menu */
|
/* Navigation Menu */
|
||||||
.main-navigation .menu {
|
.main-navigation {
|
||||||
display: inline-block;
|
|
||||||
margin-top: 24px;
|
|
||||||
margin-top: 1.714285714rem;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 12px;
|
|
||||||
font-size: 0.857142857rem;
|
|
||||||
border-top: 1px solid #ededed;
|
|
||||||
border-bottom: 1px solid #ededed;
|
|
||||||
}
|
|
||||||
.main-navigation ul {
|
|
||||||
margin: 0;
|
|
||||||
text-indent: 0;
|
|
||||||
}
|
|
||||||
.main-navigation li ul li {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
.main-navigation li a,
|
|
||||||
.main-navigation li {
|
|
||||||
display: inline-block;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.main-navigation li a {
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: #6a6a6a;
|
|
||||||
}
|
|
||||||
.main-navigation li a:hover {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
.main-navigation li {
|
|
||||||
margin-right: 40px;
|
|
||||||
margin-right: 2.857142857rem;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.main-navigation li a {
|
|
||||||
border-bottom: 0;
|
|
||||||
line-height: 3.692307692;
|
|
||||||
}
|
|
||||||
.main-navigation li ul {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.main-navigation li ul ul {
|
|
||||||
top: 0;
|
|
||||||
left: 100%;
|
|
||||||
}
|
|
||||||
.main-navigation ul li:hover > ul {
|
|
||||||
display: block;
|
|
||||||
border-left: 0;
|
|
||||||
}
|
|
||||||
.main-navigation li ul li,
|
|
||||||
.main-navigation li ul li a {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.main-navigation li ul li a {
|
|
||||||
background: #efefef;
|
|
||||||
border-bottom: 1px solid #ededed;
|
|
||||||
display: block;
|
|
||||||
font-size: 11px;
|
|
||||||
font-size: 0.785714286rem;
|
|
||||||
line-height: 2.181818182;
|
|
||||||
padding: 8px 10px;
|
|
||||||
padding: 0.571428571rem 0.714285714rem;
|
|
||||||
width: 120px;
|
|
||||||
width: 8.571428571rem;
|
|
||||||
}
|
|
||||||
.main-navigation li ul li a:hover {
|
|
||||||
background: #e3e3e3;
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
.main-navigation .current-menu-item > a,
|
|
||||||
.main-navigation .current-menu-ancestor > a,
|
|
||||||
.main-navigation .current_page_item > a,
|
|
||||||
.main-navigation .current_page_ancestor > a {
|
|
||||||
color: #636363;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
nav[role="navigation"].main-small-navigation {
|
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
margin-top: 1.714285714rem;
|
margin-top: 1.714285714rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
nav[role="navigation"].main-small-navigation li {
|
.main-navigation li {
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
margin-top: 1.714285714rem;
|
margin-top: 1.714285714rem;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
@ -602,18 +521,18 @@ nav[role="navigation"].main-small-navigation li {
|
||||||
line-height: 2;
|
line-height: 2;
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
nav[role="navigation"].main-small-navigation a {
|
.main-navigation a {
|
||||||
color: #5e5e5e;
|
color: #5e5e5e;
|
||||||
}
|
}
|
||||||
nav[role="navigation"].main-small-navigation a:hover {
|
.main-navigation a:hover {
|
||||||
color: #21759b;
|
color: #21759b;
|
||||||
}
|
}
|
||||||
|
.main-navigation .menu {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.menu-toggle {
|
.menu-toggle {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.main-small-navigation .menu {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Banner */
|
/* Banner */
|
||||||
section[role="banner"] {
|
section[role="banner"] {
|
||||||
|
@ -1413,6 +1332,85 @@ img#wpstats {
|
||||||
font-size: 1.857142857rem;
|
font-size: 1.857142857rem;
|
||||||
line-height: 1.846153846;
|
line-height: 1.846153846;
|
||||||
}
|
}
|
||||||
|
.main-navigation .menu {
|
||||||
|
border-bottom: 1px solid #ededed;
|
||||||
|
border-top: 1px solid #ededed;
|
||||||
|
display: inline-block !important;
|
||||||
|
font-size: 12px;
|
||||||
|
font-size: 0.857142857rem;
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.main-navigation ul {
|
||||||
|
margin: 0;
|
||||||
|
text-indent: 0;
|
||||||
|
}
|
||||||
|
.main-navigation li ul li {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.main-navigation li a,
|
||||||
|
.main-navigation li {
|
||||||
|
display: inline-block;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.main-navigation li a {
|
||||||
|
color: #6a6a6a;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.main-navigation li a:hover {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.main-navigation li {
|
||||||
|
margin: 0 40px 0 0;
|
||||||
|
margin: 0 2.857142857rem 0 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.main-navigation li a {
|
||||||
|
border-bottom: 0;
|
||||||
|
line-height: 3.692307692;
|
||||||
|
}
|
||||||
|
.main-navigation li ul {
|
||||||
|
display: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.main-navigation li ul ul {
|
||||||
|
top: 0;
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
.main-navigation ul li:hover > ul {
|
||||||
|
border-left: 0;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.main-navigation li ul li a {
|
||||||
|
background: #efefef;
|
||||||
|
border-bottom: 1px solid #ededed;
|
||||||
|
display: block;
|
||||||
|
font-size: 11px;
|
||||||
|
font-size: 0.785714286rem;
|
||||||
|
line-height: 2.181818182;
|
||||||
|
padding: 8px 10px;
|
||||||
|
padding: 0.571428571rem 0.714285714rem;
|
||||||
|
width: 120px;
|
||||||
|
width: 8.571428571rem;
|
||||||
|
}
|
||||||
|
.main-navigation li ul li a:hover {
|
||||||
|
background: #e3e3e3;
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
.main-navigation .current-menu-item > a,
|
||||||
|
.main-navigation .current-menu-ancestor > a,
|
||||||
|
.main-navigation .current_page_item > a,
|
||||||
|
.main-navigation .current_page_ancestor > a {
|
||||||
|
color: #636363;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.menu-toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.entry-header .entry-title {
|
.entry-header .entry-title {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-size: 1.571428571rem;
|
font-size: 1.571428571rem;
|
||||||
|
|
Loading…
Reference in New Issue