WordPress.org

Make WordPress Core

Ticket #21562: 21562.no-jQuery.diff

File 21562.no-jQuery.diff, 2.7 KB (added by obenland, 8 years 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