Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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
  • Loading branch information...
commit 6de0e77fd458a9a4ba4224cf4b52906b33edf2ce 1 parent 9dbb6a3
Lance Willett authored
View
2  wp-content/themes/twentytwelve/functions.php
@@ -104,7 +104,7 @@ function twentytwelve_scripts_styles() {
* JavaScript for handling navigation menus and the resized
* 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.
View
2  wp-content/themes/twentytwelve/header.php
@@ -36,7 +36,7 @@
</hgroup>
<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>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>
View
16 wp-content/themes/twentytwelve/js/navigation.js
@@ -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' );
+ } );
+} );
View
46 wp-content/themes/twentytwelve/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 );
- } );
-} );
View
174 wp-content/themes/twentytwelve/style.css
@@ -508,93 +508,12 @@ a:hover {
}
/* Navigation Menu */
-.main-navigation .menu {
- 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 {
+.main-navigation {
margin-top: 24px;
margin-top: 1.714285714rem;
text-align: center;
}
-nav[role="navigation"].main-small-navigation li {
+.main-navigation li {
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 12px;
@@ -602,18 +521,18 @@ nav[role="navigation"].main-small-navigation li {
line-height: 2;
float: none;
}
-nav[role="navigation"].main-small-navigation a {
+.main-navigation a {
color: #5e5e5e;
}
-nav[role="navigation"].main-small-navigation a:hover {
+.main-navigation a:hover {
color: #21759b;
}
+.main-navigation .menu {
+ display: none;
+}
.menu-toggle {
display: inline-block;
}
-.main-small-navigation .menu {
- display: none;
-}
/* Banner */
section[role="banner"] {
@@ -1413,6 +1332,85 @@ img#wpstats {
font-size: 1.857142857rem;
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 {
font-size: 22px;
font-size: 1.571428571rem;
Please sign in to comment.
Something went wrong with that request. Please try again.