Ticket #21562: 21562.3.diff

File 21562.3.diff, 9.5 KB (added by lancewillett, 9 months 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.