WordPress.org

Make WordPress Core

Ticket #21562: 21562.css-menu-switch.2.diff

File 21562.css-menu-switch.2.diff, 8.8 KB (added by obenland, 19 months ago)

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

     
    508508} 
    509509 
    510510/* Navigation Menu */ 
    511 .main-navigation .menu { 
    512         display: inline-block; 
    513         margin-top: 24px; 
    514         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 { 
    567         text-align: center; 
    568 } 
    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 { 
     511.main-navigation { 
    593512        margin-top: 24px; 
    594513        margin-top: 1.714285714rem; 
    595514        text-align: center; 
    596515} 
    597 nav[role="navigation"].main-small-navigation li { 
     516.main-navigation li { 
    598517        margin-top: 24px; 
    599518        margin-top: 1.714285714rem; 
    600519        font-size: 12px; 
    … …  
    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 { 
     534        clip: auto; 
    612535        display: inline-block; 
    613 } 
    614 .main-small-navigation .menu { 
    615         display: none; 
     536        position: relative !important; 
    616537} 
    617538 
    618539/* Banner */ 
    … …  
    14131334                font-size: 1.857142857rem; 
    14141335                line-height: 1.846153846; 
    14151336        } 
     1337        .main-navigation .menu { 
     1338                display: inline-block !important; 
     1339                width: 100%; 
     1340                font-size: 12px; 
     1341                font-size: 0.857142857rem; 
     1342                border-top: 1px solid #ededed; 
     1343                border-bottom: 1px solid #ededed; 
     1344                text-align: left; 
     1345        } 
     1346        .main-navigation ul { 
     1347                margin: 0; 
     1348                text-indent: 0; 
     1349        } 
     1350        .main-navigation li ul li { 
     1351                padding-left: 0; 
     1352        } 
     1353        .main-navigation li a, 
     1354        .main-navigation li { 
     1355                display: inline-block; 
     1356                text-decoration: none; 
     1357        } 
     1358        .main-navigation li a { 
     1359                text-transform: uppercase; 
     1360                color: #6a6a6a; 
     1361        } 
     1362        .main-navigation li a:hover { 
     1363                color: #000; 
     1364        } 
     1365        .main-navigation li { 
     1366                margin: 0 40px 0 0; 
     1367                margin: 0 2.857142857rem 0 0; 
     1368                position: relative; 
     1369        } 
     1370        .main-navigation li a { 
     1371                border-bottom: 0; 
     1372                line-height: 3.692307692; 
     1373        } 
     1374        .main-navigation li ul { 
     1375                display: none; 
     1376                position: absolute; 
     1377                top: 100%; 
     1378                padding: 0; 
     1379                margin: 0; 
     1380                z-index: 1; 
     1381        } 
     1382        .main-navigation li ul ul { 
     1383                top: 0; 
     1384                left: 100%; 
     1385        } 
     1386        .main-navigation ul li:hover > ul { 
     1387                display: block; 
     1388                border-left: 0; 
     1389        } 
     1390        .main-navigation li ul li, 
     1391        .main-navigation li ul li a { 
     1392                text-align: center; 
     1393        } 
     1394        .main-navigation li ul li a { 
     1395                background: #efefef; 
     1396                border-bottom: 1px solid #ededed; 
     1397                display: block; 
     1398                font-size: 11px; 
     1399                font-size: 0.785714286rem; 
     1400                line-height: 2.181818182; 
     1401                padding: 8px 10px; 
     1402                padding: 0.571428571rem 0.714285714rem; 
     1403                width: 120px; 
     1404                width: 8.571428571rem; 
     1405        } 
     1406        .main-navigation li ul li a:hover { 
     1407                background: #e3e3e3; 
     1408                color: #444; 
     1409        } 
     1410        .main-navigation .current-menu-item > a, 
     1411        .main-navigation .current-menu-ancestor > a, 
     1412        .main-navigation .current_page_item > a, 
     1413        .main-navigation .current_page_ancestor > a { 
     1414                color: #636363; 
     1415                font-weight: bold; 
     1416        } 
     1417        .menu-toggle { 
     1418                clip: rect(1px, 1px, 1px, 1px); 
     1419                position: absolute !important; 
     1420        } 
    14161421        .entry-header .entry-title { 
    14171422                font-size: 22px; 
    14181423                font-size: 1.571428571rem; 

  • 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' ), '20120817', true ); 
    108108 
    109109        /** 
    110110         * Load special font CSS file. 

  • 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; 
    11  
    12         $.fn.smallMenu = function() { 
    13                 if ( ! masthead.find( '.menu' ).children().length ) { 
    14                         $( '.menu-toggle' ).remove(); 
    15                         return; 
    16                 } 
     8         
     9        if ( $( '#masthead .menu' ).children().length ) { 
     10                $( '#masthead h3.assistive-text' ).addClass( 'menu-toggle' );    
     11        } 
    1712 
    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 ); 
     13        $( '.menu-toggle' ).off( 'click' ).click( function() { 
     14                $( '#masthead .menu' ).stop().slideToggle(); 
     15                $( this ).toggleClass( 'toggled-on' ); 
    4516        } ); 
     17         
    4618} ); 
     19 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