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, 8 years 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