Advertisement
loonattic

Current Tertiary Menu JS

Oct 7th, 2015
25
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.01 KB | None | 0 0
  1. /**
  2. * navigation.js
  3. *
  4. * Handles toggling the navigation menu for small screens and enables tab
  5. * support for dropdown menus.
  6. */
  7. ( function() {
  8. var tertiary_container, tertiary_button, tertiary_menu, tertiary_links, tertiary_subMenus;
  9.  
  10. tertiary_container = document.getElementById( 'tertiary-navigation' );
  11. if ( ! tertiary_container ) {
  12. return;
  13. }
  14.  
  15. tertiary_button = tertiary_container.querySelector('.tertiary-menu-toggle');
  16. if ( 'undefined' === typeof tertiary_button ) {
  17. return;
  18. }
  19.  
  20. tertiary_menu = tertiary_container.getElementsByTagName( 'ul' )[0];
  21.  
  22. // Hide menu toggle button if menu is empty and return early.
  23. if ( 'undefined' === typeof tertiary_menu ) {
  24. tertiary_button.style.display = 'none';
  25. return;
  26. }
  27.  
  28. tertiary_menu.setAttribute( 'aria-expanded', 'false' );
  29. if ( -1 === tertiary_menu.className.indexOf( 'nav-menu' ) ) {
  30. tertiary_menu.className += ' nav-menu';
  31. }
  32.  
  33. tertiary_button.onclick = function() {
  34. if ( -1 !== tertiary_container.className.indexOf( 'toggled' ) ) {
  35. tertiary_container.className = tertiary_container.className.replace( ' toggled', '' );
  36. tertiary_button.setAttribute( 'aria-expanded', 'false' );
  37. tertiary_menu.setAttribute( 'aria-expanded', 'false' );
  38. } else {
  39. tertiary_container.className += ' toggled';
  40. tertiary_button.setAttribute( 'aria-expanded', 'true' );
  41. tertiary_menu.setAttribute( 'aria-expanded', 'true' );
  42. }
  43. };
  44.  
  45. // Get all the link elements within the menu.
  46. tertiary_links = tertiary_menu.getElementsByTagName( 'a' );
  47. tertiary_subMenus = tertiary_menu.getElementsByTagName( 'ul' );
  48.  
  49. // Set menu items with submenus to aria-haspopup="true".
  50. for ( var i = 0, len = tertiary_subMenus.length; i < len; i++ ) {
  51. tertiary_subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
  52. }
  53.  
  54. // Each time a menu link is focused or blurred, toggle focus.
  55. for ( i = 0, len = tertiary_links.length; i < len; i++ ) {
  56. tertiary_links[i].addEventListener( 'focus', toggleFocus, true );
  57. tertiary_links[i].addEventListener( 'blur', toggleFocus, true );
  58. }
  59.  
  60. /**
  61. * Sets or removes .focus class on an element.
  62. */
  63. function toggleFocus() {
  64. var tertiary_self = this;
  65.  
  66. // Move up through the ancestors of the current link until we hit .nav-menu.
  67. while ( -1 === tertiary_self.className.indexOf( 'nav-menu' ) ) {
  68.  
  69. // On li elements toggle the class .focus.
  70. if ( 'li' === tertiary_self.tagName.toLowerCase() ) {
  71. if ( -1 !== tertiary_self.className.indexOf( 'focus' ) ) {
  72. tertiary_self.className = tertiary_self.className.replace( ' focus', '' );
  73. } else {
  74. tertiary_self.className += ' focus';
  75. }
  76. }
  77.  
  78. tertiary_self = tertiary_self.parentElement;
  79. }
  80. }
  81. } )();
  82.  
  83. jQuery(window).load(function($) {
  84.  
  85. // Add dropdown toggle that display child menu items.
  86. 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-up"></i></a>' );
  87.  
  88. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement