Created
September 4, 2015 07:34
-
-
Save generatepress/56e84848ee0c6ab6bdb4 to your computer and use it in GitHub Desktop.
Adding a menu toggle for a third menu item
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* navigation.js | |
* | |
* Handles toggling the navigation menu for small screens and enables tab | |
* support for dropdown menus. | |
*/ | |
( function() { | |
var tertiary_container, tertiary_button, tertiary_menu, tertiary_links, tertiary_subMenus; | |
tertiary_container = document.getElementById( 'tertiary-navigation' ); | |
if ( ! tertiary_container ) { | |
return; | |
} | |
tertiary_button = tertiary_container.querySelector('.tertiary-menu-toggle'); | |
if ( 'undefined' === typeof tertiary_button ) { | |
return; | |
} | |
tertiary_menu = tertiary_container.getElementsByTagName( 'ul' )[0]; | |
// Hide menu toggle button if menu is empty and return early. | |
if ( 'undefined' === typeof tertiary_menu ) { | |
tertiary_button.style.display = 'none'; | |
return; | |
} | |
tertiary_menu.setAttribute( 'aria-expanded', 'false' ); | |
if ( -1 === tertiary_menu.className.indexOf( 'nav-menu' ) ) { | |
tertiary_menu.className += ' nav-menu'; | |
} | |
tertiary_button.onclick = function() { | |
if ( -1 !== tertiary_container.className.indexOf( 'toggled' ) ) { | |
tertiary_container.className = tertiary_container.className.replace( ' toggled', '' ); | |
tertiary_button.setAttribute( 'aria-expanded', 'false' ); | |
tertiary_menu.setAttribute( 'aria-expanded', 'false' ); | |
} else { | |
tertiary_container.className += ' toggled'; | |
tertiary_button.setAttribute( 'aria-expanded', 'true' ); | |
tertiary_menu.setAttribute( 'aria-expanded', 'true' ); | |
} | |
}; | |
// Get all the link elements within the menu. | |
tertiary_links = tertiary_menu.getElementsByTagName( 'a' ); | |
tertiary_subMenus = tertiary_menu.getElementsByTagName( 'ul' ); | |
// Set menu items with submenus to aria-haspopup="true". | |
for ( var i = 0, len = tertiary_subMenus.length; i < len; i++ ) { | |
tertiary_subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' ); | |
} | |
// Each time a menu link is focused or blurred, toggle focus. | |
for ( i = 0, len = tertiary_links.length; i < len; i++ ) { | |
tertiary_links[i].addEventListener( 'focus', toggleFocus, true ); | |
tertiary_links[i].addEventListener( 'blur', toggleFocus, true ); | |
} | |
/** | |
* Sets or removes .focus class on an element. | |
*/ | |
function toggleFocus() { | |
var tertiary_self = this; | |
// Move up through the ancestors of the current link until we hit .nav-menu. | |
while ( -1 === tertiary_self.className.indexOf( 'nav-menu' ) ) { | |
// On li elements toggle the class .focus. | |
if ( 'li' === tertiary_self.tagName.toLowerCase() ) { | |
if ( -1 !== tertiary_self.className.indexOf( 'focus' ) ) { | |
tertiary_self.className = tertiary_self.className.replace( ' focus', '' ); | |
} else { | |
tertiary_self.className += ' focus'; | |
} | |
} | |
tertiary_self = tertiary_self.parentElement; | |
} | |
} | |
} )(); | |
jQuery(window).load(function($) { | |
// Add dropdown toggle that display child menu items. | |
jQuery( '.tertiary-navigation .page_item_has_children > a, .tertiary-navigation .menu-item-has-children > a' ).after( '<a href="#" class="dropdown-toggle" aria-expanded="false"><i class="fa fa-caret-down"></i></a>' ); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment