WordPress.org

Make WordPress Core

Ticket #24839: 24839.twenty-twelve.4.diff

File 24839.twenty-twelve.4.diff, 4.3 KB (added by lancewillett, 6 years ago)

More JS fixes, namespace the events

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

     
    110110        position: absolute;
    111111        top: 100%;
    112112        z-index: 1;
     113        clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    113114}
    114115.ie7 .main-navigation li ul {
    115116        left: 0;
  • wp-content/themes/twentytwelve/functions.php

     
    140140                wp_enqueue_script( 'comment-reply' );
    141141
    142142        // Adds JavaScript for handling the navigation menu hide-and-show behavior.
    143         wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
     143        wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20140318', true );
    144144
    145145        $font_url = twentytwelve_get_font_url();
    146146        if ( ! empty( $font_url ) )
  • wp-content/themes/twentytwelve/js/navigation.js

     
    11/**
    2  * navigation.js
    3  *
    4  * Handles toggling the navigation menu for small screens.
     2 * Handles toggling the navigation menu for small screens and
     3 * accessibility for submenu items.
    54 */
    65( function() {
    76        var nav = document.getElementById( 'site-navigation' ), button, menu;
    8         if ( ! nav )
     7        if ( ! nav ) {
    98                return;
     9        }
     10
    1011        button = nav.getElementsByTagName( 'h3' )[0];
    1112        menu   = nav.getElementsByTagName( 'ul' )[0];
    12         if ( ! button )
     13        if ( ! button ) {
    1314                return;
     15        }
    1416
    1517        // Hide button if menu is missing or empty.
    1618        if ( ! menu || ! menu.childNodes.length ) {
     
    1921        }
    2022
    2123        button.onclick = function() {
    22                 if ( -1 == menu.className.indexOf( 'nav-menu' ) )
     24                if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
    2325                        menu.className = 'nav-menu';
     26                }
    2427
    25                 if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
     28                if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
    2629                        button.className = button.className.replace( ' toggled-on', '' );
    2730                        menu.className = menu.className.replace( ' toggled-on', '' );
    2831                } else {
     
    3033                        menu.className += ' toggled-on';
    3134                }
    3235        };
    33 } )();
    34  No newline at end of file
     36} )();
     37
     38// Better focus for hidden submenu items for accessibility.
     39( function( $ ) {
     40        $( '.main-navigation' ).find( 'a' ).on( 'focus.twentytwelve blur.twentytwelve', function() {
     41                $( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
     42        } );
     43} )( jQuery );
  • wp-content/themes/twentytwelve/style.css

     
    590590.main-navigation a {
    591591        color: #5e5e5e;
    592592}
    593 .main-navigation a:hover {
     593.main-navigation a:hover,
     594.main-navigation a:focus {
    594595        color: #21759b;
    595596}
    596597.main-navigation ul.nav-menu,
     
    15091510                text-transform: uppercase;
    15101511                white-space: nowrap;
    15111512        }
    1512         .main-navigation li a:hover {
     1513        .main-navigation li a:hover,
     1514        .main-navigation li a:focus {
    15131515                color: #000;
    15141516        }
    15151517        .main-navigation li {
     
    15181520                position: relative;
    15191521        }
    15201522        .main-navigation li ul {
    1521                 display: none;
    15221523                margin: 0;
    15231524                padding: 0;
    15241525                position: absolute;
    15251526                top: 100%;
    15261527                z-index: 1;
     1528                height: 1px;
     1529                width: 1px;
     1530                overflow: hidden;
     1531                clip: rect(1px, 1px, 1px, 1px)
    15271532        }
    15281533        .main-navigation li ul ul {
    15291534                top: 0;
    15301535                left: 100%;
    15311536        }
    1532         .main-navigation ul li:hover > ul {
     1537        .main-navigation ul li:hover > ul,
     1538        .main-navigation ul li:focus > ul,
     1539        .main-navigation .focus > ul {
    15331540                border-left: 0;
    1534                 display: block;
     1541                clip: inherit;
     1542                overflow: inherit;
     1543                height: inherit;
     1544                width: inherit;         
    15351545        }
    15361546        .main-navigation li ul li a {
    15371547                background: #efefef;
     
    15461556                width: 12.85714286rem;
    15471557                white-space: normal;
    15481558        }
    1549         .main-navigation li ul li a:hover {
     1559        .main-navigation li ul li a:hover,
     1560        .main-navigation li ul li a:focus {
    15501561                background: #e3e3e3;
    15511562                color: #444;
    15521563        }