Skip to content

Instantly share code, notes, and snippets.

@scottlyttle

scottlyttle/old-underscores-header-markup.php

Forked from krogsgard/old-underscores-header-markup.php
Created September 19, 2013 11:24
Show Gist options
  • Save scottlyttle/6622049 to your computer and use it in GitHub Desktop.
Save scottlyttle/6622049 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @krogsgard krogsgard revised this gist Aug 30, 2013. 1 changed file with 40 additions and 0 deletions.
    40 changes: 40 additions & 0 deletions small-menu.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    /**
    * Handles toggling the main navigation menu for small screens.
    * This is a toggle method previously used by the _s theme that utilizes jQuery and a specific browserWidth trigger.
    */
    jQuery( document ).ready( function( $ ) {
    var $masthead = $( '#masthead' ),
    timeout = false;

    $.fn.smallMenu = function() {
    $masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
    $masthead.find( '.site-navigation h1' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );

    $( '.menu-toggle' ).click( function() {
    $masthead.find( '.menu' ).toggle();
    $( this ).toggleClass( 'toggled-on' );
    } );
    };

    // Check viewport width on first load.
    if ( $( window ).width() < 600 )
    $.fn.smallMenu();

    // Check viewport width when user resizes the browser window.
    $( window ).resize( function() {
    var browserWidth = $( window ).width();

    if ( false !== timeout )
    clearTimeout( timeout );

    timeout = setTimeout( function() {
    if ( browserWidth < 600 ) {
    $.fn.smallMenu();
    } else {
    $masthead.find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
    $masthead.find( '.site-navigation h1' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
    $masthead.find( '.menu' ).removeAttr( 'style' );
    }
    }, 200 );
    } );
    } );
  2. @krogsgard krogsgard created this gist Aug 30, 2013.
    13 changes: 13 additions & 0 deletions old-underscores-header-markup.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    <header id="masthead" class="site-header" role="banner">
    <hgroup>
    <h1 class="site-title"><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    </hgroup>

    <nav role="navigation" class="site-navigation main-navigation">
    <h1 class="assistive-text"><?php _e( 'Menu', '_s' ); ?></h1>
    <div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', '_s' ); ?>"><?php _e( 'Skip to content', '_s' ); ?></a></div>

    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    </nav>
    </header><!-- #masthead .site-header -->