https://cofca.org/wp-content/themes/poseidon/js/navigation.js?ver=20170127

1/**
2 * Navigation Plugin
3 * Includes responsiveMenu() function
4 *
5 * Copyright 2016 ThemeZee
6 * Free to use under the GPLv2 and later license.
7 * http://www.gnu.org/licenses/gpl-2.0.html
8 *
9 * Author: Thomas Weichselbaumer (themezee.com)
10 *
11 * @package Poseidon
12 */
13
14(function($) {
15
16	/**--------------------------------------------------------------
17	# Responsive Navigation for WordPress menus
18	--------------------------------------------------------------*/
19	$.fn.responsiveMenu = function( options ) {
20
21		if ( options === undefined ) {
22			options = {};
23		}
24
25		/* Set Defaults */
26		var defaults = {
27			menuClass: 'menu',
28			toggleClass: 'menu-toggle',
29			toggleText: '',
30			maxWidth: '60em'
31		};
32
33		/* Set Variables */
34		var vars = $.extend( {}, defaults, options ),
35			menuClass = vars.menuClass,
36			toggleID = ( vars.toggleID ) ? vars.toggleID : vars.toggleClass,
37			toggleClass = vars.toggleClass,
38			toggleText = vars.toggleText,
39			maxWidth = vars.maxWidth,
40			$this = $( this ),
41			$menu = $( '.' + menuClass );
42
43		/*********************
44		* Desktop Navigation *
45		**********************/
46
47		/* Set and reset dropdown animations based on screen size */
48		if ( typeof matchMedia == 'function' ) {
49			var mq = window.matchMedia( '(max-width: ' + maxWidth + ')' );
50			mq.addListener( widthChange );
51			widthChange( mq );
52		}
53		function widthChange( mq ) {
54
55			if ( mq.matches ) {
56
57				/* Reset desktop navigation menu dropdown animation on smaller screens */
58				$menu.find( 'ul.sub-menu' ).css( { display: 'block' } );
59				$menu.find( 'li ul.sub-menu' ).css( { visibility: 'visible', display: 'block' } );
60				$menu.find( 'li.menu-item-has-children' ).unbind( 'mouseenter mouseleave' );
61
62				$menu.find( 'li.menu-item-has-children ul.sub-menu' ).each( function() {
63					$( this ).hide();
64					$( this ).parent().find( '.submenu-dropdown-toggle' ).removeClass( 'active' );
65				} );
66
67				/* Remove ARIA states on mobile devices */
68				$menu.find( 'li.menu-item-has-children > a' ).unbind( 'focus.aria mouseenter.aria blur.aria  mouseleave.aria' );
69
70			} else {
71
72				/* Add dropdown animation for desktop navigation menu */
73				$menu.find( 'ul.sub-menu' ).css( { display: 'none' } );
74				$menu.find( 'li.menu-item-has-children' ).hover( function() {
75					$( this ).find( 'ul:first' ).css( { visibility: 'visible', display: 'none' } ).slideDown( 300 );
76				}, function() {
77					$( this ).find( 'ul:first' ).css( { visibility: 'hidden' } );
78				} );
79
80				/* Make sure menu does not fly off the right of the screen */
81				$menu.find( 'li ul.sub-menu li.menu-item-has-children' ).mouseenter( function() {
82					if ( $( this ).children( 'ul.sub-menu' ).offset().left + 250 > $( window ).width() ) {
83						$( this ).children( 'ul.sub-menu' ).css( { right: '100%', left: 'auto' } );
84					}
85				});
86
87				// Add menu items with submenus to aria-haspopup="true".
88				$menu.find( 'li.menu-item-has-children' ).attr( 'aria-haspopup', 'true' ).attr( 'aria-expanded', 'false' );
89
90				/* Properly update the ARIA states on focus (keyboard) and mouse over events */
91				$menu.find( 'li.menu-item-has-children > a' ).on( 'focus.aria mouseenter.aria', function() {
92					$( this ).parents( '.menu-item' ).attr( 'aria-expanded', true ).find( 'ul:first' ).css( { visibility: 'visible', display: 'block' } );
93				} );
94
95				/* Properly update the ARIA states on blur (keyboard) and mouse out events */
96				$menu.find( 'li.menu-item-has-children > a' ).on( 'blur.aria  mouseleave.aria', function() {
97
98					if( ! $(this).parent().next( 'li' ).length > 0 && ! $(this).next('ul').length > 0 ) {
99
100						$( this ).closest( 'li.menu-item-has-children' ).attr( 'aria-expanded', false ).find( '.sub-menu' ).css( { display: 'none' } );
101
102					}
103
104				} );
105
106			}
107
108		}
109
110		/********************
111		* Mobile Navigation *
112		*********************/
113
114		/* Add Menu Toggle Button for mobile navigation */
115		$this.before( '<button id=\"' + toggleID + '\" class=\"' + toggleClass + '\">' + toggleText + '</button>' );
116
117		/* Add dropdown toggle for submenus on mobile navigation */
118		$menu.find( 'li.menu-item-has-children' ).prepend( '<span class=\"submenu-dropdown-toggle\"></span>' );
119
120		/* Add dropdown slide animation for mobile devices */
121		$( '#' + toggleID ).on( 'click', function() {
122			$menu.slideToggle();
123			$( this ).toggleClass( 'active' );
124		});
125
126		/* Add dropdown animation for submenus on mobile navigation */
127		$menu.find( 'li.menu-item-has-children .sub-menu' ).each( function () {
128			$( this ).hide();
129		} );
130		$menu.find( '.submenu-dropdown-toggle' ).on( 'click', function() {
131			$( this ).parent().find( 'ul:first' ).slideToggle();
132			$( this ).toggleClass( 'active' );
133		});
134
135	};
136
137	/**--------------------------------------------------------------
138	# Setup Navigation Menus
139	--------------------------------------------------------------*/
140	$( document ).ready( function() {
141
142		/* Setup Main Navigation */
143		$( '#main-navigation' ).responsiveMenu( {
144			menuClass: 'main-navigation-menu',
145			toggleClass: 'main-navigation-toggle',
146			maxWidth: '60em'
147		} );
148
149		/* Setup Top Navigation */
150		$( '#top-navigation' ).responsiveMenu( {
151			menuClass: 'top-navigation-menu',
152			toggleClass: 'top-navigation-toggle',
153			maxWidth: '60em'
154		} );
155
156	} );
157
158}(jQuery));