Skip to content

Instantly share code, notes, and snippets.

@generatepress
Created September 4, 2015 07:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save generatepress/56e84848ee0c6ab6bdb4 to your computer and use it in GitHub Desktop.
Save generatepress/56e84848ee0c6ab6bdb4 to your computer and use it in GitHub Desktop.
Adding a menu toggle for a third menu item
/**
* 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