WordPress.org

Make WordPress Core

Ticket #21562: 21562.5.diff

File 21562.5.diff, 3.0 KB (added by lancewillett, 3 years ago)

Better JS menu hide/show with support for wp_page_menu markup

  • wp-content/themes/twentytwelve/style.css

     
    531531.main-navigation a:hover { 
    532532        color: #21759b; 
    533533} 
    534 .main-navigation .menu { 
     534.main-navigation ul.nav-menu, 
     535.main-navigation div.nav-menu ul { 
    535536        display: none; 
    536537} 
     538.main-navigation ul.nav-menu.toggled-on, 
    537539.menu-toggle { 
    538540        display: inline-block; 
    539541} 
     
    13401342                font-size: 1.857142857rem; 
    13411343                line-height: 1.846153846; 
    13421344        } 
    1343         .main-navigation .menu { 
     1345        .main-navigation ul.nav-menu { 
    13441346                border-bottom: 1px solid #ededed; 
    13451347                border-top: 1px solid #ededed; 
    13461348                display: inline-block !important; 
     
    15481550        .site-content nav, 
    15491551        .widget-area, 
    15501552        img.header-image, 
    1551         nav.site-navigation { 
     1553        .main-navigation { 
    15521554                display: none; 
    15531555        } 
    15541556        .wrapper { 
  • wp-content/themes/twentytwelve/js/navigation.js

     
    33 * 
    44 * Handles toggling the navigation menu for small screens. 
    55 */ 
     6( function() { 
     7        var button = document.getElementById( 'site-navigation' ).getElementsByTagName( 'h3' )[0], 
     8            menu   = document.getElementById( 'site-navigation' ).getElementsByTagName( 'ul' )[0]; 
    69 
    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 
     10        button.onclick = function() { 
     11                if ( button.className.match( new RegExp( '(\\s|^)toggled-on(\\s|$)' ) ) ) { 
     12                        button.className = 'menu-toggle'; 
     13                        menu.className = 'nav-menu'; 
     14                } else { 
     15                        button.className= 'menu-toggle toggled-on'; 
     16                        menu.className = 'nav-menu toggled-on'; 
     17                } 
     18        }; 
     19} )(); 
     20 No newline at end of file 
  • wp-content/themes/twentytwelve/header.php

     
    3535                        <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2> 
    3636                </hgroup> 
    3737 
    38                 <nav class="site-navigation main-navigation" role="navigation"> 
     38                <nav id="site-navigation" class="main-navigation" role="navigation"> 
    3939                        <h3 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> 
    41                         <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> 
     41                        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?> 
    4242                </nav> 
    4343 
    4444                <?php $header_image = get_header_image();