From 492225792213d688b77d3e3e53740475b6cc3226 Mon Sep 17 00:00:00 2001 From: Lance Willett Date: Mon, 20 Aug 2012 18:35:33 +0000 Subject: [PATCH] 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 --- functions.php | 2 +- header.php | 2 +- js/navigation.js | 16 +++++ js/theme.js | 46 ------------- style.css | 174 +++++++++++++++++++++++------------------------ 5 files changed, 104 insertions(+), 136 deletions(-) create mode 100644 js/navigation.js delete mode 100644 js/theme.js diff --git a/functions.php b/functions.php index 0058f4b55..34486d470 100644 --- a/functions.php +++ b/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. diff --git a/header.php b/header.php index 143064a73..4e5a8130f 100644 --- a/header.php +++ b/header.php @@ -36,7 +36,7 @@ diff --git a/js/navigation.js b/js/navigation.js new file mode 100644 index 000000000..72900e242 --- /dev/null +++ b/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' ); + } ); +} ); \ No newline at end of file diff --git a/js/theme.js b/js/theme.js deleted file mode 100644 index cf284b36d..000000000 --- a/js/theme.js +++ /dev/null @@ -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 ); - } ); -} ); \ No newline at end of file diff --git a/style.css b/style.css index 9a7501c38..612c5b20e 100644 --- a/style.css +++ b/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;