WordPress.org

Make WordPress Core

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

File 21562.css-menu-switch.diff, 4.7 KB (added by obenland, 8 years ago)
  • wp-content/themes/twentytwelve/style.css

     
    508508
    509509/* Navigation Menu */
    510510.main-navigation .menu {
    511         display: inline-block;
    512511        margin-top: 24px;
    513512        margin-top: 1.714285714rem;
    514513        width: 100%;
     
    588587        color: #636363;
    589588        font-weight: bold;
    590589}
    591 nav[role="navigation"].main-small-navigation {
    592         margin-top: 24px;
    593         margin-top: 1.714285714rem;
    594         text-align: center;
    595 }
    596 nav[role="navigation"].main-small-navigation li {
    597         margin-top: 24px;
    598         margin-top: 1.714285714rem;
    599         font-size: 12px;
    600         font-size: 0.857142857rem;
    601         line-height: 2;
    602         float: none;
    603 }
    604 nav[role="navigation"].main-small-navigation a {
    605         color: #5e5e5e;
    606 }
    607 nav[role="navigation"].main-small-navigation a:hover {
    608         color: #21759b;
    609 }
    610 .menu-toggle {
    611         display: inline-block;
    612 }
    613 .main-small-navigation .menu {
    614         display: none;
    615 }
    616590
    617591/* Banner */
    618592section[role="banner"] {
     
    13681342/* =Media queries
    13691343-------------------------------------------------------------- */
    13701344
     1345/* Maximum width of 599 pixels. */
     1346@media screen and (max-width: 599px) {
     1347        nav[role="navigation"].main-navigation {
     1348                margin-top: 24px;
     1349                margin-top: 1.714285714rem;
     1350                text-align: center;
     1351        }
     1352        nav[role="navigation"].main-navigation li {
     1353                margin-right: 0;
     1354                margin-top: 24px;
     1355                margin-top: 1.714285714rem;
     1356                font-size: 12px;
     1357                font-size: 0.857142857rem;
     1358                line-height: 2;
     1359                float: none;
     1360        }
     1361        nav[role="navigation"].main-navigation a {
     1362                color: #5e5e5e;
     1363        }
     1364        nav[role="navigation"].main-navigation a:hover {
     1365                color: #21759b;
     1366        }
     1367        .menu-toggle {
     1368                clip: auto;
     1369                display: inline-block;
     1370                position: relative !important;
     1371        }
     1372        .main-navigation .menu {
     1373                border: 0;
     1374                display: none;
     1375        }
     1376}
     1377
    13711378/* Minimum width of 600 pixels. */
    13721379@media screen and (min-width: 600px) {
    13731380        .entry-content p,
     
    14471454                margin: 0 0 24px;
    14481455                margin: 0 0 1.714285714rem;
    14491456        }
     1457        .main-navigation .menu {
     1458                display: inline-block !important;
     1459        }
    14501460}
    14511461
    14521462/* Minimum width of 960 pixels. */
  • 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="assistive-text 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/js/theme.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                $( '.menu-toggle' ).remove();
     11                return;
     12        }
    1713
    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 );
     14        $( '.menu-toggle' ).off( 'click' ).click( function() {
     15                $( '#masthead .menu' ).stop().slideToggle();
     16                $( this ).toggleClass( 'toggled-on' );
    4517        } );
     18       
    4619} );
     20 No newline at end of file