Ticket #21562: 21562.no-jQuery.diff

wp-content/themes/twentytwelve/style.css

@@ -532 +532 @@
         color: #21759b;
 }
 .main-navigation .menu {
-        display: none;
+        height: 0;
+        overflow: hidden;
+        -webkit-transition: height 1s;
+        -moz-transition: height 1s;
+        -o-transition: height 1s;
+        transition: height 1s;
 }
 .menu-toggle {
         display: inline-block;
 }
+.main-navigation .menu.toggled-on {
+        height: auto;
+}
 
 /* Banner */
 section[role="banner"] {
@@ -1343 +1351 @@
         .main-navigation .menu {
                 border-bottom: 1px solid #ededed;
                 border-top: 1px solid #ededed;
-                display: inline-block !important;
                 font-size: 12px;
                 font-size: 0.857142857rem;
+                height: auto;
                 text-align: left;
                 width: 100%;
         }

wp-content/themes/twentytwelve/header.php

@@ -36 +36 @@
                 </hgroup>
 
                 <nav class="site-navigation main-navigation" role="navigation">
-                        <h3 class="menu-toggle"><?php _e( 'Show menu', 'twentytwelve' ); ?></h3>
+                        <h3 id="menu-button" class="menu-toggle"><?php _e( 'Show menu', 'twentytwelve' ); ?></h3>
                         <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>
                         <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
                 </nav>

wp-content/themes/twentytwelve/js/navigation.js

@@ -4 +4 @@
  * Handles toggling the navigation menu for small screens.
  */
 
-jQuery( document ).ready( function( $ ) {
-        if ( ! $( '#masthead .menu' ).children().length ) {
-                $( '#masthead .menu-toggle' ).hide();
-        }
-
-        $( '.menu-toggle' ).off( 'click' ).click( function() {
-                $( '#masthead .menu' ).stop().slideToggle();
-                $( this ).toggleClass( 'toggled-on' );
-        } );
-} );
- No newline at end of file
+(function(){
+        var button = document.getElementById( 'menu-button' );
+        button.onclick = function() {
+                var menu = document.getElementById( 'menu-menu' );
+                if ( button.className.match( new RegExp( '(\\s|^)toggled-on(\\s|$)' ) ) ) {
+                        button.className = 'menu-toggle';
+                        menu.className = 'menu';
+                } else {
+                        button.className= 'menu-toggle toggled-on';
+                        menu.className = 'menu toggled-on';
+                }
+        };
+})();
+ No newline at end of file