wp-content/themes/twentytwelve/js/navigation.js

   1 /**
   2  * Handles toggling the navigation menu for small screens and
   3  * accessibility for submenu items.
   4  */
   5 ( function() {
   6         var nav = document.getElementById( 'site-navigation' ), button, menu;
   7         if ( ! nav ) {
   8                 return;
   9         }
  10
  11         button = nav.getElementsByTagName( 'button' )[0];
  12         menu   = nav.getElementsByTagName( 'ul' )[0];
  13         if ( ! button ) {
  14                 return;
  15         }
  16
  17         // Hide button if menu is missing or empty.
  18         if ( ! menu || ! menu.childNodes.length ) {
  19                 button.style.display = 'none';
  20                 return;
  21         }
  22
  23         button.onclick = function() {
  24                 if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
  25                         menu.className = 'nav-menu';
  26                 }
  27
  28                 if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
  29                         button.className = button.className.replace( ' toggled-on', '' );
  30                         menu.className = menu.className.replace( ' toggled-on', '' );
  31                 } else {
  32                         button.className += ' toggled-on';
  33                         menu.className += ' toggled-on';
  34                 }
  35         };
  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
  44   if ( 'ontouchstart' in window ) {
  45     $( '.menu-item-has-children > a' ).on( 'touchstart.twentytwelve', function( e ) {
  46       var el = $( this ).parent( 'li' );
  47
  48       if ( ! el.hasClass( 'focus' ) ) {
  49         e.preventDefault();
  50         el.toggleClass( 'focus' );
  51         el.siblings( '.focus').removeClass( 'focus' );
  52       }
  53     } );
  54   }
  55 } )( jQuery );