Second Menu in TwentyTwelve – non-toggle on second button

Featured Theme Forums General Discussion Second Menu in TwentyTwelve – non-toggle on second button

Tagged: ,

This topic contains 2 replies, has 2 voices, and was last updated by  DavidBorrink 3 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #18078

    DavidBorrink
    Participant

    Hi Zeaks,

    I successfully did a second menu on a site last year and am adding this to another project, but it’s not working. I copy-pasted all the relevant code to the new site, but I’m finding the added menu’s mobile button is not toggling on.

    In this installation, I’ve got the primary menu on top, and the added menu below it. “main-navigation” is the primary menu, and “lower-navigation” is the added menu.

    I’ve looked over this and I’m just not seeing what I have done wrong. Perhaps your eyes might notice it immediately.

    HEADER CODE:

    <nav id="site-navigation" class="main-navigation" role="navigation">
    			<button class="menu-toggle"><?php _e( 'Upper Menu', 'twentytwelve' ); ?></button>
    			<a href="#content">"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
    			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    		</nav><!-- #site-navigation -->
    
        <nav id="site-navigation" class="lower-navigation" role="navigation">
    	<button class="menu-toggle"><?php _e( 'Lower Menu', 'twentytwelve' ); ?></button>
    	<div class="skip-link assistive-text"><a href="#content">"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
    	<?php wp_nav_menu( array( 'theme_location' => 'secondary', 'menu_class' => 'nav-menu', 'fallback_cb' => false ) ); ?>
    </nav><!-- #site-navigation -->

    JAVASCRIPT:

    /**
    * Handles toggling the navigation menu for small screens and
    * accessibility for submenu items.
    */
    ( function() {
    var nav = document.getElementById( 'site-navigation' ), button, menu;
    if ( ! nav ) {
    return;
    }
     
    button = nav.getElementsByTagName( 'button' )[0];
    menu = nav.getElementsByTagName( 'ul' )[0];
    if ( ! button ) {
    return;
    }
     
    // Hide button if menu is missing or empty.
    if ( ! menu || ! menu.childNodes.length ) {
    button.style.display = 'none';
    return;
    }
     
    button.onclick = function() {
    if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
    menu.className = 'nav-menu';
    }
     
    if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
    button.className = button.className.replace( ' toggled-on', '' );
    menu.className = menu.className.replace( ' toggled-on', '' );
    } else {
    button.className += ' toggled-on';
    menu.className += ' toggled-on';
    }
    };
    } )();
     
    // Better focus for hidden submenu items for accessibility.
    ( function( $ ) {
    $( '.main-navigation' ).find( 'a' ).on( 'focus.twentytwelve blur.twentytwelve', function() {
    $( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
    } );
     
    if ( 'ontouchstart' in window ) {
    $( '.menu-item-has-children > a' ).on( 'touchstart.twentytwelve', function( e ) {
    var el = $( this ).parent( 'li' );
     
    if ( ! el.hasClass( 'focus' ) ) {
    e.preventDefault();
    el.toggleClass( 'focus' );
    el.siblings( '.focus').removeClass( 'focus' );
    }
    } );
    }
    } )( jQuery );
     
    // JavaScript Document
    // Lower Navigation
    ( function() {
    	var button = document.getElementById( 'lower-navigation' ).getElementsByClassName( 'menu-toggle' )[0],
    		menu = document.getElementById( 'lower-navigation' ).getElementsByTagName( 'ul' )[0];
     
    if ( undefined === button )
    return false;
     
    // Hide button if menu is missing or empty.
    if ( undefined === menu || ! menu.childNodes.length ) {
    button.style.display = 'none';
    return false;
    }
     
    button.onclick = function() {
    if ( -1 == menu.className.indexOf( 'nav-menu' ) )
    menu.className = 'nav-menu';
     
    if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
    button.className = button.className.replace( ' toggled-on', '' );
    menu.className = menu.className.replace( ' toggled-on', '' );
    } else {
    button.className += ' toggled-on';
    menu.className += ' toggled-on';
    }
    };
    } )();
    #18079

    zeaks
    Keymaster

    Hi David, I think you were the person that pointed out an issue in my tutorial on adding a second menu to twenty Twelve theme. http://zeaks.org/add-second-menu-to-twenty-twelve-theme/ Javascript is not my strong area but I will take a look tonight and get back to you. If you have a copy of the theme you’re willing to share that would also be helpful you can email it to zeaks AT live.ca if you want to do that.

    #18080

    DavidBorrink
    Participant

    Will do. Javascript is one of my “wanna do better” desires as well. I’ll send that theme to you.

    David

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.