https://www.langan.com/wp-content/themes/langan/js/megamenu-r3.js

1/*global jQuery */
2jQuery(document).ready(function () {
3
4    "use strict";
5    
6    // to remove sub-menu class
7    jQuery('.menu ul').removeClass('sub-menu');
8    // add class to blurb container so it can be hidden on mobile
9    jQuery('.menu > ul > li > ul > li:has(a > span.blurb)').addClass('li-blurb');
10
11    jQuery('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
12    //Checks if li has sub (ul) and adds class for toggle icon - just an UI
13
14
15    //jQuery('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
16    jQuery('.menu > ul > li > ul:not(:has(ul))').addClass('single-level');
17    //shows menu items without nested lists as a single horizontal column
18    
19    jQuery(".menu > ul > li > ul").removeClass('hover'); //.hide();
20    // resets all menus as closed upon page load
21    
22    //jQuery(".menu-dropdown-icon > a").removeClass('active');
23    jQuery(".menu-dropdown-icon").append('<a class="dropdown-icon-button"></a>');
24    jQuery(".menu-dropdown-icon > a.dropdown-icon-button").removeClass('active');
25    // resets dropdown arrow on mobile menu upon page load
26    
27    jQuery(window).on('pageshow', function() {
28    	//console.log('pageshow');
29    	jQuery(".menu > ul > li > ul").removeClass('hover'); //.hide();
30		jQuery(".menu-dropdown-icon > a.dropdown-icon-button").removeClass('active');
31		jQuery(".menu-mobile-button").removeClass("on");	
32		jQuery(".menu > ul").removeClass('show-on-mobile');
33	});
34	// resets menus on unload
35
36    jQuery(".menu > ul").before("<div class=\"menu-mobile-button-container\"><div class=\"menu-mobile-button\"><div class=\"one\"></div><div class=\"two\"></div><div class=\"three\"></div></div></div>");
37	jQuery(".menu-mobile-button").click(function(e) {
38		jQuery(".menu-mobile-button").toggleClass("on");	
39		jQuery(".menu > ul").toggleClass('show-on-mobile');
40	});
41    
42
43
44    jQuery(".menu > ul > li").hover(
45        function (e) {
46        	var link = jQuery(this);
47            if (jQuery(window).width() > 1122) {
48            	//console.log('hover in');
49                jQuery(this).children("ul").addClass('hover'); //.css("display", "flex").hide().fadeIn(150);
50                e.preventDefault();
51            } else {
52                //e.preventDefault();
53            }
54        }, function (e) {
55            if (jQuery(window).width() > 1122) {
56            	//console.log('hover out');
57                jQuery(this).children("ul").removeClass('hover'); //.fadeOut(150);
58                e.preventDefault();
59            }
60        }
61    );
62    
63    //jQuery(".menu > ul > li.menu-dropdown-icon").on('touchstart', function(e) {
64    jQuery(".menu > ul > li").on('touchstart', function(e) {
65    	'use strict'; //satisfy code inspectors
66    	if (jQuery(window).width() > 1122) {
67    		//console.log('touchstart');
68			var link = jQuery(this); //preselect the link
69			if (link.children("ul").first().hasClass('hover')) {
70				//console.log('touchstart has hover 1');
71				e.preventDefault;
72				return true;
73			} else {
74				//console.log('touchstart no hover 1');
75				var thisMenu = jQuery(this).children("ul");
76				jQuery('li > ul').not(this).removeClass('hover');
77				thisMenu.addClass('hover');
78				return true;
79			}
80        
81    	}
82    });
83    
84    jQuery(".menu > ul > li").on('focusin', function(e) {
85        'use strict'; //satisfy code inspectors
86    	if (jQuery(window).width() > 1122) {
87    		console.log('focus');
88			var link = jQuery(this); //preselect the link
89			if (link.children("ul").first().hasClass('hover')) {
90				console.log('focus has hover 1');
91				e.preventDefault;
92				return true;
93			} else {
94				console.log('focus no hover 1');
95				var thisMenu = jQuery(this).children("ul");
96				jQuery('li > ul').not(this).removeClass('hover');
97				thisMenu.addClass('hover');
98				return true;
99			}
100        
101    	}
102    });
103    
104    jQuery(".menu > ul > li").on('focusout', function(e) {
105        'use strict'; //satisfy code inspectors
106    	if (jQuery(window).width() > 1122) {
107    		console.log('focusout');
108			var link = jQuery(this); //preselect the link
109			if (link.children("ul").first().hasClass('hover')) {
110				console.log('focusout has hover 1');
111				var thisMenu = jQuery(this).children("ul");
112				thisMenu.removeClass('hover');
113				e.preventDefault;
114				return true;
115			} 
116    	}
117    });
118    
119    
120    //If width is less or equal to 959px dropdowns are displayed on click 
121    /*
122    jQuery('.menu > ul > li:has( > ul)').click(function() {
123    	var thisMenu = jQuery(this).children("ul");
124        var prevState = thisMenu.css('display');
125        if (jQuery(window).width() <= 959) {
126        	jQuery(".menu > ul > li > ul").fadeOut();
127            if (prevState === 'none') {
128                thisMenu.fadeIn(150);
129            }
130        }
131    });
132    */
133    
134    jQuery(".menu-dropdown-icon > a.dropdown-icon-button").click(function(e) {
135    	if (jQuery(window).width() <= 1122) {
136			var thisButton = jQuery(this);
137			if (thisButton.hasClass('active')) {
138				jQuery(".menu-dropdown-icon > a.dropdown-icon-button").removeClass('active');
139			} else {
140				jQuery(".menu-dropdown-icon > a.dropdown-icon-button").removeClass('active');
141				thisButton.toggleClass('active');
142			}
143			//thisButton.toggleClass('active');
144			var thisMenu = jQuery(this).parent().children("ul");
145			var prevState = thisMenu.css('display');
146        	jQuery(".menu > ul > li > ul").fadeOut();
147            if (prevState === 'none') {
148                thisMenu.css("display", "flex").hide().fadeIn(150);
149            }
150        }
151    })
152    
153    jQuery(window).resize(function(e) {
154    	if (jQuery(window).width() <= 1122) {
155    		jQuery('.menu > ul > li > ul').css('display', 'none');
156    	} else {
157    		jQuery('.menu > ul > li > ul').css('display', 'flex');
158    	}
159    });
160
161});