WordPress.org

Make WordPress Core

Changeset 21554


Ignore:
Timestamp:
08/20/2012 06:35:33 PM (8 years ago)
Author:
lancewillett
Message:

Twenty Twelve: improve navigation to be mobile-first and not rely on JS for hiding and showing, props obenland for patches. See #21562.

Location:
trunk/wp-content/themes/twentytwelve
Files:
3 edited
1 moved

Legend:

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

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

    r21525 r21554  
    3737
    3838        <nav class="site-navigation main-navigation" role="navigation">
    39             <h3 class="assistive-text"><?php _e( 'Show navigation', 'twentytwelve' ); ?></h3>
     39            <h3 class="menu-toggle"><?php _e( 'Show navigation', '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' ) ); ?>
  • trunk/wp-content/themes/twentytwelve/js/navigation.js

    r21553 r21554  
    66
    77jQuery( document ).ready( function( $ ) {
    8     var masthead = $( '#masthead' ),
    9         largeWindow = window.matchMedia( 'screen and (min-width: 600px)' ),
    10         timeout = false;
     8    if ( $( '#masthead .menu' ).children().length ) {
     9        $( '#masthead h3.assistive-text' ).addClass( 'menu-toggle' );
     10    }
    1111
    12     $.fn.smallMenu = function() {
    13         if ( ! masthead.find( '.menu' ).children().length ) {
    14             $( '.menu-toggle' ).remove();
    15             return;
    16         }
    17 
    18         masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
    19         masthead.find( '.site-navigation h3' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );
    20 
    21         $( '.menu-toggle' ).off( 'click' ).click( function() {
    22             masthead.find( '.menu' ).stop().slideToggle();
    23             $( this ).toggleClass( 'toggled-on' );
    24         } );
    25     };
    26 
    27     // Check viewport width on first load.
    28     if ( ! largeWindow.matches )
    29         $.fn.smallMenu();
    30 
    31     // Check viewport width when user resizes the browser window.
    32     $( window ).resize( function() {
    33         if ( false !== timeout )
    34             clearTimeout( timeout );
    35 
    36         timeout = setTimeout( function() {
    37             if ( ! largeWindow.matches ) {
    38                 $.fn.smallMenu();
    39             } else {
    40                 masthead.find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
    41                 masthead.find( '.site-navigation h3' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
    42                 masthead.find( '.menu' ).removeAttr( 'style' );
    43             }
    44         }, 200 );
     12    $( '.menu-toggle' ).off( 'click' ).click( function() {
     13        $( '#masthead .menu' ).stop().slideToggle();
     14        $( this ).toggleClass( 'toggled-on' );
    4515    } );
    4616} );
  • trunk/wp-content/themes/twentytwelve/style.css

    r21540 r21554  
    509509
    510510/* Navigation Menu */
    511 .main-navigation .menu {
    512     display: inline-block;
    513     margin-top: 24px;
    514     margin-top: 1.714285714rem;
    515     width: 100%;
    516     font-size: 12px;
    517     font-size: 0.857142857rem;
    518     border-top: 1px solid #ededed;
    519     border-bottom: 1px solid #ededed;
    520 }
    521 .main-navigation ul {
    522     margin: 0;
    523     text-indent: 0;
    524 }
    525 .main-navigation li ul li {
    526     padding-left: 0;
    527 }
    528 .main-navigation li a,
    529 .main-navigation li {
    530     display: inline-block;
    531     text-decoration: none;
    532 }
    533 .main-navigation li a {
    534     text-transform: uppercase;
    535     color: #6a6a6a;
    536 }
    537 .main-navigation li a:hover {
    538     color: #000;
    539 }
    540 .main-navigation li {
    541     margin-right: 40px;
    542     margin-right: 2.857142857rem;
    543     position: relative;
    544 }
    545 .main-navigation li a {
    546     border-bottom: 0;
    547     line-height: 3.692307692;
    548 }
    549 .main-navigation li ul {
    550     display: none;
    551     position: absolute;
    552     top: 100%;
    553     padding: 0;
    554     margin: 0;
    555     z-index: 1;
    556 }
    557 .main-navigation li ul ul {
    558     top: 0;
    559     left: 100%;
    560 }
    561 .main-navigation ul li:hover > ul {
    562     display: block;
    563     border-left: 0;
    564 }
    565 .main-navigation li ul li,
    566 .main-navigation li ul li a {
    567     text-align: center;
    568 }
    569 .main-navigation li ul li a {
    570     background: #efefef;
    571     border-bottom: 1px solid #ededed;
    572     display: block;
    573     font-size: 11px;
    574     font-size: 0.785714286rem;
    575     line-height: 2.181818182;
    576     padding: 8px 10px;
    577     padding: 0.571428571rem 0.714285714rem;
    578     width: 120px;
    579     width: 8.571428571rem;
    580 }
    581 .main-navigation li ul li a:hover {
    582     background: #e3e3e3;
    583     color: #444;
    584 }
    585 .main-navigation .current-menu-item > a,
    586 .main-navigation .current-menu-ancestor > a,
    587 .main-navigation .current_page_item > a,
    588 .main-navigation .current_page_ancestor > a {
    589     color: #636363;
    590     font-weight: bold;
    591 }
    592 nav[role="navigation"].main-small-navigation {
     511.main-navigation {
    593512    margin-top: 24px;
    594513    margin-top: 1.714285714rem;
    595514    text-align: center;
    596515}
    597 nav[role="navigation"].main-small-navigation li {
     516.main-navigation li {
    598517    margin-top: 24px;
    599518    margin-top: 1.714285714rem;
     
    603522    float: none;
    604523}
    605 nav[role="navigation"].main-small-navigation a {
     524.main-navigation a {
    606525    color: #5e5e5e;
    607526}
    608 nav[role="navigation"].main-small-navigation a:hover {
     527.main-navigation a:hover {
    609528    color: #21759b;
     529}
     530.main-navigation .menu {
     531    display: none;
    610532}
    611533.menu-toggle {
    612534    display: inline-block;
    613 }
    614 .main-small-navigation .menu {
    615     display: none;
    616535}
    617536
     
    14141333        line-height: 1.846153846;
    14151334    }
     1335    .main-navigation .menu {
     1336        border-bottom: 1px solid #ededed;
     1337        border-top: 1px solid #ededed;
     1338        display: inline-block !important;
     1339        font-size: 12px;
     1340        font-size: 0.857142857rem;
     1341        text-align: left;
     1342        width: 100%;
     1343    }
     1344    .main-navigation ul {
     1345        margin: 0;
     1346        text-indent: 0;
     1347    }
     1348    .main-navigation li ul li {
     1349        padding-left: 0;
     1350    }
     1351    .main-navigation li a,
     1352    .main-navigation li {
     1353        display: inline-block;
     1354        text-decoration: none;
     1355    }
     1356    .main-navigation li a {
     1357        color: #6a6a6a;
     1358        text-transform: uppercase;
     1359    }
     1360    .main-navigation li a:hover {
     1361        color: #000;
     1362    }
     1363    .main-navigation li {
     1364        margin: 0 40px 0 0;
     1365        margin: 0 2.857142857rem 0 0;
     1366        position: relative;
     1367    }
     1368    .main-navigation li a {
     1369        border-bottom: 0;
     1370        line-height: 3.692307692;
     1371    }
     1372    .main-navigation li ul {
     1373        display: none;
     1374        margin: 0;
     1375        padding: 0;
     1376        position: absolute;
     1377        top: 100%;
     1378        z-index: 1;
     1379    }
     1380    .main-navigation li ul ul {
     1381        top: 0;
     1382        left: 100%;
     1383    }
     1384    .main-navigation ul li:hover > ul {
     1385        border-left: 0;
     1386        display: block;
     1387    }
     1388    .main-navigation li ul li a {
     1389        background: #efefef;
     1390        border-bottom: 1px solid #ededed;
     1391        display: block;
     1392        font-size: 11px;
     1393        font-size: 0.785714286rem;
     1394        line-height: 2.181818182;
     1395        padding: 8px 10px;
     1396        padding: 0.571428571rem 0.714285714rem;
     1397        width: 120px;
     1398        width: 8.571428571rem;
     1399    }
     1400    .main-navigation li ul li a:hover {
     1401        background: #e3e3e3;
     1402        color: #444;
     1403    }
     1404    .main-navigation .current-menu-item > a,
     1405    .main-navigation .current-menu-ancestor > a,
     1406    .main-navigation .current_page_item > a,
     1407    .main-navigation .current_page_ancestor > a {
     1408        color: #636363;
     1409        font-weight: bold;
     1410    }
     1411    .menu-toggle {
     1412        display: none;
     1413    }
    14161414    .entry-header .entry-title {
    14171415        font-size: 22px;
Note: See TracChangeset for help on using the changeset viewer.