WordPress.org

Make WordPress Core

Changeset 20007


Ignore:
Timestamp:
02/28/2012 03:59:47 AM (9 years ago)
Author:
lancewillett
Message:

Twenty Twelve: add support for toggling the navigation menu in small screens. See #19978.

Triggered when a viewport is under 600 pixels wide. This functionality depends on JS being enabled, and will naturally fall back to a normal, expanded menu for a client without JS.

Props iandstewart for the original JS file and concept.

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

Legend:

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

    r19960 r20007  
    189189
    190190/**
     191 * Enqueue script for handling navigation.
     192 *
     193 * @since Twenty Twelve 1.0
     194 */
     195function twentytwelve_scripts() {
     196    wp_enqueue_script( 'jquery' );
     197    wp_enqueue_script( 'navigation', get_template_directory_uri() . '/js/navigation.js', 'jquery', '20120227', true );
     198}
     199add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts' );
     200
     201/**
    191202 * Get our wp_nav_menu() fallback, wp_page_menu(), to show a home link.
    192203 *
  • trunk/wp-content/themes/twentytwelve/header.php

    r19961 r20007  
    4141        </hgroup>
    4242
    43         <nav class="site-navigation" role="navigation">
    44             <h3 class="assistive-text"><?php _e( 'Main menu', 'twentytwelve' ); ?></h3>
    45             <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentytwelve' ); ?>"><?php _e( 'Skip to primary content', 'twentytwelve' ); ?></a></div>
    46             <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentytwelve' ); ?>"><?php _e( 'Skip to secondary content', 'twentytwelve' ); ?></a></div>
     43        <nav class="site-navigation main-navigation" role="navigation">
     44            <h3 class="assistive-text"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
     45            <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>
    4746            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    4847        </nav>
  • trunk/wp-content/themes/twentytwelve/style.css

    r19958 r20007  
    339339    padding: 0.571428571rem 0.857142857rem;
    340340    width: 90px;
     341}
     342
     343/* Small menu */
     344nav[role="navigation"].main-small-navigation {
     345    text-align: left;
     346}
     347.menu-toggle {
     348    cursor: pointer;
     349    font-size: 12px;
     350    font-size: 0.857142857rem;
     351    line-height: 1.846153846;
     352}
     353.main-small-navigation .menu {
     354    display: none;
     355}
     356@media screen and (max-width: 600px) {
     357    nav[role="navigation"] li a {
     358        padding: 8px 0;
     359        line-height: 1.090909091;
     360    }
    341361}
    342362
Note: See TracChangeset for help on using the changeset viewer.