https://astronet.ge/wp-content/themes/admiral/js/navigation.js?ver=20160719

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