WordPress.org

Make WordPress Core

Ticket #21562: 21562.3.diff

File 21562.3.diff, 9.5 KB (added by lancewillett, 6 years ago)

Added menu-toggle class in header.php, minor cleanup

  • wp-content/themes/twentytwelve/style.css

     
    508508}
    509509
    510510/* Navigation Menu */
    511 .main-navigation .menu {
    512         display: inline-block;
     511.main-navigation {
    513512        margin-top: 24px;
    514513        margin-top: 1.714285714rem;
    515         width: 100%;
    516         font-size: 12px;
    517         font-size: 0.857142857rem;
    518         border-top: 1px solid #ededed;
    519         border-bottom: 1px solid #ededed;
    520 }
    521 .main-navigation ul {
    522         margin: 0;
    523         text-indent: 0;
    524 }
    525 .main-navigation li ul li {
    526         padding-left: 0;
    527 }
    528 .main-navigation li a,
    529 .main-navigation li {
    530         display: inline-block;
    531         text-decoration: none;
    532 }
    533 .main-navigation li a {
    534         text-transform: uppercase;
    535         color: #6a6a6a;
    536 }
    537 .main-navigation li a:hover {
    538         color: #000;
    539 }
    540 .main-navigation li {
    541         margin-right: 40px;
    542         margin-right: 2.857142857rem;
    543         position: relative;
    544 }
    545 .main-navigation li a {
    546         border-bottom: 0;
    547         line-height: 3.692307692;
    548 }
    549 .main-navigation li ul {
    550         display: none;
    551         position: absolute;
    552         top: 100%;
    553         padding: 0;
    554         margin: 0;
    555         z-index: 1;
    556 }
    557 .main-navigation li ul ul {
    558         top: 0;
    559         left: 100%;
    560 }
    561 .main-navigation ul li:hover > ul {
    562         display: block;
    563         border-left: 0;
    564 }
    565 .main-navigation li ul li,
    566 .main-navigation li ul li a {
    567514        text-align: center;
    568515}
    569 .main-navigation li ul li a {
    570         background: #efefef;
    571         border-bottom: 1px solid #ededed;
    572         display: block;
    573         font-size: 11px;
    574         font-size: 0.785714286rem;
    575         line-height: 2.181818182;
    576         padding: 8px 10px;
    577         padding: 0.571428571rem 0.714285714rem;
    578         width: 120px;
    579         width: 8.571428571rem;
    580 }
    581 .main-navigation li ul li a:hover {
    582         background: #e3e3e3;
    583         color: #444;
    584 }
    585 .main-navigation .current-menu-item > a,
    586 .main-navigation .current-menu-ancestor > a,
    587 .main-navigation .current_page_item > a,
    588 .main-navigation .current_page_ancestor > a {
    589         color: #636363;
    590         font-weight: bold;
    591 }
    592 nav[role="navigation"].main-small-navigation {
     516.main-navigation li {
    593517        margin-top: 24px;
    594518        margin-top: 1.714285714rem;
    595         text-align: center;
    596 }
    597 nav[role="navigation"].main-small-navigation li {
    598         margin-top: 24px;
    599         margin-top: 1.714285714rem;
    600519        font-size: 12px;
    601520        font-size: 0.857142857rem;
    602521        line-height: 2;
    603522        float: none;
    604523}
    605 nav[role="navigation"].main-small-navigation a {
     524.main-navigation a {
    606525        color: #5e5e5e;
    607526}
    608 nav[role="navigation"].main-small-navigation a:hover {
     527.main-navigation a:hover {
    609528        color: #21759b;
    610529}
     530.main-navigation .menu {
     531        display: none;
     532}
    611533.menu-toggle {
    612534        display: inline-block;
    613535}
    614 .main-small-navigation .menu {
    615         display: none;
    616 }
    617536
    618537/* Banner */
    619538section[role="banner"] {
     
    14131332                font-size: 1.857142857rem;
    14141333                line-height: 1.846153846;
    14151334        }
     1335        .main-navigation .menu {
     1336                border-bottom: 1px solid #ededed;
     1337                border-top: 1px solid #ededed;
     1338                display: inline-block !important;
     1339                font-size: 12px;
     1340                font-size: 0.857142857rem;
     1341                text-align: left;
     1342                width: 100%;
     1343        }
     1344        .main-navigation ul {
     1345                margin: 0;
     1346                text-indent: 0;
     1347        }
     1348        .main-navigation li ul li {
     1349                padding-left: 0;
     1350        }
     1351        .main-navigation li a,
     1352        .main-navigation li {
     1353                display: inline-block;
     1354                text-decoration: none;
     1355        }
     1356        .main-navigation li a {
     1357                color: #6a6a6a;
     1358                text-transform: uppercase;
     1359        }
     1360        .main-navigation li a:hover {
     1361                color: #000;
     1362        }
     1363        .main-navigation li {
     1364                margin: 0 40px 0 0;
     1365                margin: 0 2.857142857rem 0 0;
     1366                position: relative;
     1367        }
     1368        .main-navigation li a {
     1369                border-bottom: 0;
     1370                line-height: 3.692307692;
     1371        }
     1372        .main-navigation li ul {
     1373                display: none;
     1374                margin: 0;
     1375                padding: 0;
     1376                position: absolute;
     1377                top: 100%;
     1378                z-index: 1;
     1379        }
     1380        .main-navigation li ul ul {
     1381                top: 0;
     1382                left: 100%;
     1383        }
     1384        .main-navigation ul li:hover > ul {
     1385                border-left: 0;
     1386                display: block;
     1387        }
     1388        .main-navigation li ul li a {
     1389                background: #efefef;
     1390                border-bottom: 1px solid #ededed;
     1391                display: block;
     1392                font-size: 11px;
     1393                font-size: 0.785714286rem;
     1394                line-height: 2.181818182;
     1395                padding: 8px 10px;
     1396                padding: 0.571428571rem 0.714285714rem;
     1397                width: 120px;
     1398                width: 8.571428571rem;
     1399        }
     1400        .main-navigation li ul li a:hover {
     1401                background: #e3e3e3;
     1402                color: #444;
     1403        }
     1404        .main-navigation .current-menu-item > a,
     1405        .main-navigation .current-menu-ancestor > a,
     1406        .main-navigation .current_page_item > a,
     1407        .main-navigation .current_page_ancestor > a {
     1408                color: #636363;
     1409                font-weight: bold;
     1410        }
     1411        .menu-toggle {
     1412                display: none;
     1413        }
    14161414        .entry-header .entry-title {
    14171415                font-size: 22px;
    14181416                font-size: 1.571428571rem;
  • wp-content/themes/twentytwelve/js/navigation.js

     
    55 */
    66
    77jQuery( document ).ready( function( $ ) {
    8         var masthead = $( '#masthead' ),
    9                 largeWindow = window.matchMedia( 'screen and (min-width: 600px)' ),
    10                 timeout = false;
     8        if ( $( '#masthead .menu' ).children().length ) {
     9                $( '#masthead h3.assistive-text' ).addClass( 'menu-toggle' );
     10        }
    1111
    12         $.fn.smallMenu = function() {
    13                 if ( ! masthead.find( '.menu' ).children().length ) {
    14                         $( '.menu-toggle' ).remove();
    15                         return;
    16                 }
    17 
    18                 masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
    19                 masthead.find( '.site-navigation h3' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );
    20 
    21                 $( '.menu-toggle' ).off( 'click' ).click( function() {
    22                         masthead.find( '.menu' ).stop().slideToggle();
    23                         $( this ).toggleClass( 'toggled-on' );
    24                 } );
    25         };
    26 
    27         // Check viewport width on first load.
    28         if ( ! largeWindow.matches )
    29                 $.fn.smallMenu();
    30 
    31         // Check viewport width when user resizes the browser window.
    32         $( window ).resize( function() {
    33                 if ( false !== timeout )
    34                         clearTimeout( timeout );
    35 
    36                 timeout = setTimeout( function() {
    37                         if ( ! largeWindow.matches ) {
    38                                 $.fn.smallMenu();
    39                         } else {
    40                                 masthead.find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
    41                                 masthead.find( '.site-navigation h3' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
    42                                 masthead.find( '.menu' ).removeAttr( 'style' );
    43                         }
    44                 }, 200 );
     12        $( '.menu-toggle' ).off( 'click' ).click( function() {
     13                $( '#masthead .menu' ).stop().slideToggle();
     14                $( this ).toggleClass( 'toggled-on' );
    4515        } );
    4616} );
     17 No newline at end of file
  • wp-content/themes/twentytwelve/js/theme.js

     
    1 /**
    2  * navigation.js
    3  *
    4  * Handles toggling the navigation menu for small screens.
    5  */
    6 
    7 jQuery( document ).ready( function( $ ) {
    8         var masthead = $( '#masthead' ),
    9                 largeWindow = window.matchMedia( 'screen and (min-width: 600px)' ),
    10                 timeout = false;
    11 
    12         $.fn.smallMenu = function() {
    13                 if ( ! masthead.find( '.menu' ).children().length ) {
    14                         $( '.menu-toggle' ).remove();
    15                         return;
    16                 }
    17 
    18                 masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
    19                 masthead.find( '.site-navigation h3' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );
    20 
    21                 $( '.menu-toggle' ).off( 'click' ).click( function() {
    22                         masthead.find( '.menu' ).stop().slideToggle();
    23                         $( this ).toggleClass( 'toggled-on' );
    24                 } );
    25         };
    26 
    27         // Check viewport width on first load.
    28         if ( ! largeWindow.matches )
    29                 $.fn.smallMenu();
    30 
    31         // Check viewport width when user resizes the browser window.
    32         $( window ).resize( function() {
    33                 if ( false !== timeout )
    34                         clearTimeout( timeout );
    35 
    36                 timeout = setTimeout( function() {
    37                         if ( ! largeWindow.matches ) {
    38                                 $.fn.smallMenu();
    39                         } else {
    40                                 masthead.find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
    41                                 masthead.find( '.site-navigation h3' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
    42                                 masthead.find( '.menu' ).removeAttr( 'style' );
    43                         }
    44                 }, 200 );
    45         } );
    46 } );
    47  No newline at end of file
  • wp-content/themes/twentytwelve/header.php

     
    3636                </hgroup>
    3737
    3838                <nav class="site-navigation main-navigation" role="navigation">
    39                         <h3 class="assistive-text"><?php _e( 'Show navigation', 'twentytwelve' ); ?></h3>
     39                        <h3 class="menu-toggle"><?php _e( 'Show navigation', 'twentytwelve' ); ?></h3>
    4040                        <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>
    4141                        <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    4242                </nav>
  • wp-content/themes/twentytwelve/functions.php

     
    104104         * JavaScript for handling navigation menus and the resized
    105105         * styles for small screen sizes.
    106106         */
    107         wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), '20120802', true );
     107        wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20120820', true );
    108108
    109109        /**
    110110         * Load special font CSS file.