Make WordPress Core

Changeset 21611


Ignore:
Timestamp:
08/24/2012 09:07:19 PM (12 years ago)
Author:
lancewillett
Message:

Twenty Twelve: rework navigation to remove need for jQuery and support wp_page_menu markup better. Fixes #21562.

Location:
trunk/wp-content/themes/twentytwelve
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-content/themes/twentytwelve/functions.php

    r21558 r21611  
    105105     * styles for small screen sizes.
    106106     */
    107     wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20120820', true );
     107    wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120824', true );
    108108
    109109    /**
  • trunk/wp-content/themes/twentytwelve/header.php

    r21573 r21611  
    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
  • trunk/wp-content/themes/twentytwelve/js/navigation.js

    r21557 r21611  
    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     }
     10    if ( undefined == button || undefined == menu )
     11        return false;
    1112
    12     $( '.menu-toggle' ).off( 'click' ).click( function() {
    13         $( '#masthead .menu' ).stop().slideToggle();
    14         $( this ).toggleClass( 'toggled-on' );
    15     } );
    16 } );
     13    button.onclick = function() {
     14        if ( -1 == menu.className.indexOf( 'nav-menu' ) )
     15            menu.className = 'nav-menu';
     16
     17        if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
     18            button.className = button.className.replace( ' toggled-on', '' );
     19            menu.className = menu.className.replace( ' toggled-on', '' );
     20        } else {
     21            button.className += ' toggled-on';
     22            menu.className += ' toggled-on';
     23        }
     24    };
     25
     26    // Hide menu toggle button if menu is empty.
     27    if ( ! menu.childNodes.length )
     28        button.style.display = 'none';
     29} )();
  • trunk/wp-content/themes/twentytwelve/rtl.css

    r21565 r21611  
    5555}
    5656
    57 
    58 /* =Basic structure
    59 -------------------------------------------------------------- */
    60 
    61 .main-navigation li ul ul {
    62     margin-left: 0;
    63     margin-right: 40px;
    64     margin-right: 2.857142857rem;
    65 }
    6657
    6758/* =Main Content
     
    221212        margin: 0 1.714285714rem 0;
    222213    }
     214    .main-navigation ul.nav-menu,
     215    .main-navigation div.nav-menu > ul {
     216        text-align: right;
     217    }
    223218    .main-navigation li {
    224219        margin-left: 40px;
  • trunk/wp-content/themes/twentytwelve/style.css

    r21566 r21611  
    11/*
    2 Theme Name: Twenty Twelve
     213Theme Name: Twenty Twelve
    33Theme URI: http://wordpress.org/extend/themes/twentytwelve
    44Author: the WordPress team
     
    514514    text-align: center;
    515515}
    516 .main-navigation li ul ul {
    517     margin-left: 40px;
    518     margin-left: 2.857142857rem;
    519 }
    520516.main-navigation li {
    521517    margin-top: 24px;
     
    532528    color: #21759b;
    533529}
    534 .main-navigation .menu {
     530.main-navigation ul.nav-menu,
     531.main-navigation div.nav-menu > ul {
    535532    display: none;
    536533}
     534.main-navigation ul.nav-menu.toggled-on,
    537535.menu-toggle {
    538536    display: inline-block;
     
    13411339        line-height: 1.846153846;
    13421340    }
    1343     .main-navigation .menu {
     1341    .main-navigation ul.nav-menu,
     1342    .main-navigation div.nav-menu > ul {
    13441343        border-bottom: 1px solid #ededed;
    13451344        border-top: 1px solid #ededed;
     
    13541353        text-indent: 0;
    13551354    }
    1356     .main-navigation li ul li {
    1357         padding-left: 0;
    1358     }
    13591355    .main-navigation li a,
    13601356    .main-navigation li {
     
    13631359    }
    13641360    .main-navigation li a {
     1361        border-bottom: 0;
    13651362        color: #6a6a6a;
     1363        line-height: 3.692307692;
    13661364        text-transform: uppercase;
    13671365    }
     
    13731371        margin: 0 2.857142857rem 0 0;
    13741372        position: relative;
    1375     }
    1376     .main-navigation li a {
    1377         border-bottom: 0;
    1378         line-height: 3.692307692;
    13791373    }
    13801374    .main-navigation li ul {
     
    13871381    }
    13881382    .main-navigation li ul ul {
    1389         margin-left: 0;
    13901383        top: 0;
    13911384        left: 100%;
     
    15491542    .widget-area,
    15501543    img.header-image,
    1551     nav.site-navigation {
     1544    .main-navigation {
    15521545        display: none;
    15531546    }
Note: See TracChangeset for help on using the changeset viewer.