WordPress.org

Make WordPress Core

Ticket #21562: 21562.no-jQuery.diff

File 21562.no-jQuery.diff, 2.7 KB (added by obenland, 20 months ago)
  • wp-content/themes/twentytwelve/style.css

     
    532532        color: #21759b; 
    533533} 
    534534.main-navigation .menu { 
    535         display: none; 
     535        height: 0; 
     536        overflow: hidden; 
     537        -webkit-transition: height 1s; 
     538        -moz-transition: height 1s; 
     539        -o-transition: height 1s; 
     540        transition: height 1s; 
    536541} 
    537542.menu-toggle { 
    538543        display: inline-block; 
    539544} 
     545.main-navigation .menu.toggled-on { 
     546        height: auto; 
     547} 
    540548 
    541549/* Banner */ 
    542550section[role="banner"] { 
     
    13431351        .main-navigation .menu { 
    13441352                border-bottom: 1px solid #ededed; 
    13451353                border-top: 1px solid #ededed; 
    1346                 display: inline-block !important; 
    13471354                font-size: 12px; 
    13481355                font-size: 0.857142857rem; 
     1356                height: auto; 
    13491357                text-align: left; 
    13501358                width: 100%; 
    13511359        } 
  • wp-content/themes/twentytwelve/header.php

     
    3636                </hgroup> 
    3737 
    3838                <nav class="site-navigation main-navigation" role="navigation"> 
    39                         <h3 class="menu-toggle"><?php _e( 'Show menu', 'twentytwelve' ); ?></h3> 
     39                        <h3 id="menu-button" class="menu-toggle"><?php _e( 'Show menu', '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/navigation.js

     
    44 * Handles toggling the navigation menu for small screens. 
    55 */ 
    66 
    7 jQuery( document ).ready( function( $ ) { 
    8         if ( ! $( '#masthead .menu' ).children().length ) { 
    9                 $( '#masthead .menu-toggle' ).hide(); 
    10         } 
    11  
    12         $( '.menu-toggle' ).off( 'click' ).click( function() { 
    13                 $( '#masthead .menu' ).stop().slideToggle(); 
    14                 $( this ).toggleClass( 'toggled-on' ); 
    15         } ); 
    16 } ); 
    17  No newline at end of file 
     7(function(){ 
     8        var button = document.getElementById( 'menu-button' ); 
     9        button.onclick = function() { 
     10                var menu = document.getElementById( 'menu-menu' ); 
     11                if ( button.className.match( new RegExp( '(\\s|^)toggled-on(\\s|$)' ) ) ) { 
     12                        button.className = 'menu-toggle'; 
     13                        menu.className = 'menu'; 
     14                } else { 
     15                        button.className= 'menu-toggle toggled-on'; 
     16                        menu.className = 'menu toggled-on'; 
     17                } 
     18        }; 
     19})(); 
     20 No newline at end of file