https://www.yorifuji.org/wp-content/themes/leeway/js/navigation.js?ver=20160719

1/*! jQuery navigation.js
2  Adds toggle icon for mobile navigation and dropdown animations for widescreen navigation
3  Author: Thomas W (themezee.com)
4*/
5
6(function($) {
7
8	/**--------------------------------------------------------------
9	# Responsive Navigation for WordPress menus
10	--------------------------------------------------------------*/
11	$.fn.responsiveMenu = function( options ) {
12
13		if (options === undefined) options = {};
14
15		/* Set Defaults */
16		var defaults = {
17			menuID: "menu",
18			toggleClass: "menu-toggle",
19			toggleText: "",
20			maxWidth: "60em"
21		};
22
23		/* Set Variables */
24		var vars = $.extend({}, defaults, options),
25			menuID = vars.menuID,
26			toggleID = (vars.toggleID) ? vars.toggleID : vars.toggleClass,
27			toggleClass = vars.toggleClass,
28			toggleText = vars.toggleText,
29			maxWidth = vars.maxWidth,
30			$this = $(this),
31			$menu = $('#' + menuID);
32
33
34		/*********************
35		* Desktop Navigation *
36		**********************/
37
38		/* Set and reset dropdown animations based on screen size */
39		if(typeof matchMedia == 'function') {
40			var mq = window.matchMedia('(max-width: ' + maxWidth + ')');
41			mq.addListener(widthChange);
42			widthChange(mq);
43		}
44		function widthChange(mq) {
45
46			if (mq.matches) {
47
48				/* Reset desktop navigation menu dropdown animation on smaller screens */
49				$menu.find( 'ul.sub-menu' ).css( { display: 'block' } );
50				$menu.find( 'li ul.sub-menu' ).css( { visibility: 'visible', display: 'block' } );
51				$menu.find( 'li.menu-item-has-children' ).unbind( 'mouseenter mouseleave' );
52
53				$menu.find( 'li.menu-item-has-children ul.sub-menu' ).each( function() {
54					$( this ).hide();
55					$( this ).parent().find( '.submenu-dropdown-toggle' ).removeClass( 'active' );
56				} );
57
58			} else {
59
60				/* Add dropdown animation for desktop navigation menu */
61				$menu.find( 'ul.sub-menu' ).css( { display: 'none' } );
62				$menu.find( 'li.menu-item-has-children' ).hover( function() {
63					$( this ).find( 'ul:first' ).css( { visibility: 'visible', display: 'none' } ).slideDown( 300 );
64				}, function() {
65					$( this ).find( 'ul:first' ).css( { visibility: 'hidden' } );
66				} );
67
68			}
69
70		}
71
72
73		/********************
74		* Mobile Navigation *
75		*********************/
76
77		/* Add Menu Toggle Button for mobile navigation */
78		$this.before('<button id=\"' + toggleID + '\" class=\"' + toggleClass + '\">' + toggleText + '</button>');
79
80		/* Add dropdown toggle for submenus on mobile navigation */
81		$menu.find('li.menu-item-has-children').prepend('<span class=\"submenu-dropdown-toggle\"></span>');
82
83		/* Add dropdown slide animation for mobile devices */
84		$('#' + toggleID).on('click', function(){
85			$menu.slideToggle();
86			$(this).toggleClass('active');
87		});
88
89		/* Add dropdown animation for submenus on mobile navigation */
90		$menu.find('li.menu-item-has-children .sub-menu').each( function () {
91			$( this ).hide();
92		} );
93		$menu.find('.submenu-dropdown-toggle').on('click', function(){
94			$(this).parent().find('ul:first').slideToggle();
95			$(this).toggleClass('active');
96		});
97
98	};
99
100
101	/**--------------------------------------------------------------
102	# Flip between dropdown menus for Social Icons and Top Navigation
103	--------------------------------------------------------------*/
104	$.fn.flipMenu = function( options ) {
105
106		if (options === undefined) options = {};
107
108		/* Set Defaults */
109		var defaults = {
110			menuID: "menu",
111			flipMenuID: "menu",
112			toggleClass: "menu-toggle",
113			toggleText: ""
114		};
115
116		/* Set Variables */
117		var vars = $.extend({}, defaults, options),
118			menuID = vars.menuID,
119			flipMenuID = vars.flipMenuID,
120			toggleID = (vars.toggleID) ? vars.toggleID : vars.toggleClass,
121			toggleClass = vars.toggleClass,
122			toggleText = vars.toggleText,
123			$this = $(this),
124			$menu = $('#' + menuID),
125			$flipMenu = $('#' + flipMenuID);
126
127
128		/* Add both Menu Toggle Buttons */
129		$this.before('<button id=\"' + toggleID + '\" class=\"' + toggleClass + '\">' + toggleText + '</button>');
130
131		/* Add dropdown slide animation for mobile devices */
132		$('#' + toggleID).on('click', function(){
133			if( $flipMenu.is(':visible') ) {
134				$flipMenu.slideToggle();
135				$menu.delay(400).slideToggle();
136			} else {
137				$menu.slideToggle();
138			}
139			$(this).toggleClass('active');
140		});
141
142	};
143
144
145	/**--------------------------------------------------------------
146	# Setup Navigation Menus
147	--------------------------------------------------------------*/
148	$( document ).ready( function() {
149
150		/* Setup Main Navigation */
151		$("#mainnav").responsiveMenu({
152			menuID: "mainnav-menu",
153			toggleID: "mainnav-toggle",
154			toggleClass: "mainnav-toggle",
155			maxWidth: "60em"
156		});
157
158		/* Setup Top Navigation */
159		$("#topnav").responsiveMenu({
160			menuID: "topnav-menu",
161			toggleID: "topnav-toggle-tablet",
162			toggleClass: "topnav-toggle",
163			maxWidth: "60em"
164		});
165
166
167		/* Add flipMenu for social icons menu */
168		$("#navi-social-icons").flipMenu({
169			menuID: "social-icons-menu",
170			flipMenuID: "topnav-menu",
171			toggleID: "social-menu-toggle",
172			toggleClass: "social-menu-toggle"
173		});
174
175		/* Add flipMenu for top navigation */
176		$("#topnav").flipMenu({
177			menuID: "topnav-menu",
178			flipMenuID: "social-icons-menu",
179			toggleID: "topnav-toggle-phone",
180			toggleClass: "topnav-toggle"
181		});
182
183	} );
184
185}(jQuery));