https://www.aylesburyunitedarchive.com/js/navik.menu.js

1/**
2	Navik - HTML header navigation menu - v1.4.3
3 	Copyright (c) 2022, Pophonic
4	
5	Author: Pophonic
6	Profile: https://codecanyon.net/user/pophonic
7	
8**/
9
10
11jQuery(document).ready(function() {
12	
13	"use strict";
14	
15	/* ========== Sticky on scroll ========== */
16	function stickyNav() {
17
18		var scrollTop = $(window).scrollTop(),
19			noSticky = $('.no-sticky'),
20			viewportSm = $('.viewport-sm'),
21			viewportLg = $('.viewport-lg'),
22			viewportLgBody = viewportLg.parent('body'),
23			viewportLgNosticky = $('.viewport-lg.no-sticky'),
24			viewportLgNostickyBody = viewportLgNosticky.parent('body'),
25			viewportLgLogo = viewportLg.find('.logo img'),
26			viewportLgNostickyLogo = viewportLgNosticky.find('.logo img'),
27			headerTransparentLg = $('.viewport-lg.header-transparent'),
28			headerTransparentLgNosticky = $('.viewport-lg.header-transparent.no-sticky'),
29			headerTransparentLgBody = headerTransparentLg.parent('body'),
30			headerOpacityLg = $('.viewport-lg.header-opacity'),
31			headerOpacityLgNosticky = $('.viewport-lg.header-opacity.no-sticky'),
32			headerOpacityLgBody = headerOpacityLg.parent('body');
33		if (scrollTop > navikHeaderHeight) {
34			navikHeader.addClass('sticky');
35			viewportLgLogo.attr('src', stickyLogoSrc);
36			viewportLgNostickyLogo.attr('src', logoSrc);
37			headerTransparentLg.removeClass('header-transparent-on');
38			headerOpacityLg.removeClass('header-opacity-on');
39			headerTransparentLgNosticky.addClass('header-transparent-on');
40			headerOpacityLgNosticky.addClass('header-opacity-on');
41			viewportLgBody.css("margin-top", navikHeaderHeight);
42			viewportLg.css("margin-top", -navikHeaderHeight);
43		} else {
44			navikHeader.removeClass('sticky');
45			viewportLgLogo.attr('src', logoSrc);
46			headerTransparentLg.addClass('header-transparent-on');
47			headerOpacityLg.addClass('header-opacity-on');
48			viewportLgBody.add(viewportLg).css("margin-top", "0");
49		}
50
51		noSticky.removeClass('sticky');
52		viewportSm.removeClass('sticky');
53		
54		headerTransparentLg.add(headerTransparentLgBody).add(headerOpacityLg).add(headerOpacityLgBody).add(viewportLgNostickyBody).add(viewportLgNosticky).css("margin-top", "0");
55
56		var logoCenterWidth = $('.logoCenter .logo img').width(),
57			menuCenterOneWidth = $('.center-menu-1 .navik-menu').width(),
58			menuCenterOneListMenu = $('.center-menu-1 .navik-menu > ul'),
59			menuCenterOneListWidth = menuCenterOneWidth - logoCenterWidth;
60
61		if ($(window).width() < 1200) {
62			menuCenterOneListMenu.outerWidth( menuCenterOneWidth );
63		} else {
64			menuCenterOneListMenu.outerWidth( menuCenterOneListWidth / 2 );
65		}
66
67		$('.logoCenter').width(logoCenterWidth);
68		
69	}
70
71	/* ========== Menu overlay transition ========== */
72	function overlayMenuTransition() {
73		var overlayMenuFirst = $('.navik-menu-overlay > ul > li:first-child'),
74			overlayMenuList = $('.navik-menu-overlay > ul > li');
75
76		overlayMenuFirst.attr('data-delay', '0');
77
78		overlayMenuList.each(function(){
79			var $this = $(this),
80				overlayMenuNext = $this.next('li'),
81				menuDataDelay = $this.attr('data-delay'),
82				menuDataDelayNext = parseInt(menuDataDelay) + parseInt('100');
83
84			overlayMenuNext.attr('data-delay', menuDataDelayNext);
85
86			$this.delay(menuDataDelay).queue(function(next) {
87				$(this).addClass("menuSlideIn");
88				next();
89			});
90		});
91	}
92
93	/* ========== Horizontal navigation menu ========== */
94	if ($('.navik-header').length) {
95
96		var navikHeader = $('.navik-header'),
97			navikHeaderHeight = navikHeader.height(),
98			logo = navikHeader.find('.logo'),
99			logoImg = logo.find('img'),
100			logoSrc = logoImg.attr('src'),
101			logoClone = logo.clone(),
102			mobileLogoSrc = logo.data('mobile-logo'),
103			stickyLogoSrc = logo.data('sticky-logo'),
104			burgerMenu = navikHeader.find('.burger-menu'),
105			navikMenuListWrapper = $('.navik-menu > ul'),
106			navikMenuListDropdown = $('.navik-menu ul li:has(ul)'),
107			headerShadow = $('.navik-header.header-shadow'),
108			headerTransparent = $('.navik-header.header-transparent'),
109			headerOpacity = $('.navik-header.header-opacity'),
110			megaMenuFullwidthContainer = $('.mega-menu-fullwidth .mega-menu-container');
111
112		/* ========== Center menu 1 ========== */
113		$('.center-menu-1 .navik-menu > ul:first-child').after('<div class="logoCenter"></div>');
114		$('.logoCenter').html(logoClone);
115
116		/* ========== Mega menu fullwidth wrap container ========== */
117		megaMenuFullwidthContainer.each(function(){
118			$(this).children().wrapAll('<div class="mega-menu-fullwidth-container"></div>');
119		});
120
121		/* ========== Window resize ========== */
122		$(window).on("resize", function() {
123
124			var megaMenuContainer = $('.mega-menu-fullwidth-container');
125
126			if ($(window).width() < 1200) {
127
128				logoImg.attr('src', mobileLogoSrc);
129				navikHeader.removeClass('viewport-lg');
130				navikHeader.addClass('viewport-sm');
131				headerTransparent.removeClass('header-transparent-on');
132				headerOpacity.removeClass('header-opacity-on');
133				megaMenuContainer.removeClass('container');
134
135			} else {
136
137				logoImg.attr('src', logoSrc);
138				navikHeader.removeClass('viewport-sm');
139				navikHeader.addClass('viewport-lg');
140				headerTransparent.addClass('header-transparent-on');
141				headerOpacity.addClass('header-opacity-on');
142				megaMenuContainer.addClass('container');
143
144			}
145
146			stickyNav();
147
148		}).resize();
149
150		/* ========== Dropdown Menu Toggle ========== */
151		burgerMenu.on("click", function(){
152			$(this).toggleClass('menu-open');
153			navikMenuListWrapper.slideToggle(300);
154		});
155		
156		navikMenuListDropdown.each(function(){
157			$(this).append( '<span class="dropdown-plus"></span>' );
158			$(this).addClass('dropdown_menu');
159		});
160		
161		$('.dropdown-plus').on("click", function(){
162			$(this).prev('ul').slideToggle(300);
163			$(this).toggleClass('dropdown-open');
164		});
165		
166		$('.dropdown_menu a').append('<span></span>');
167
168		/* ========== Added header shadow ========== */
169		headerShadow.append('<div class="header-shadow-wrapper"></div>');
170
171		/* ========== Sticky on scroll ========== */
172		$(window).on("scroll", function() {
173			stickyNav();
174		}).scroll();
175
176		/* ========== Menu hover transition ========== */
177		var listMenuHover4 = $('.navik-menu.menu-hover-4 > ul > li > a');
178		listMenuHover4.append('<div class="hover-transition"></div>');
179
180	}
181
182	/* ========== Overlay navigation menu ========== */
183	if ($('.navik-header-overlay').length) {
184
185		var navikHeaderOverlay = $('.navik-header-overlay'),
186			navikMenuOverlay = $('.navik-menu-overlay'),
187			burgerMenuOverlay = navikHeaderOverlay.find('.burger-menu'),
188			lineMenuOverlay = navikHeaderOverlay.find('.line-menu'),
189			menuOverlayLogo = navikHeaderOverlay.find('.logo'),
190			overlayLogoClone = menuOverlayLogo.clone(),
191			menuWrapperLogoSrc = menuOverlayLogo.data('overlay-logo'),
192			menuOverlayListDropdown = $('.navik-menu-overlay > ul > li:has(ul)'),
193			menuOverlayLink = $('.navik-menu-overlay > ul > li > a'),
194			menuSlide = $('.navik-header-overlay.menu-slide'),
195			menuSlideSubmenuLink = menuSlide.find('.navik-menu-overlay > ul ul a'),
196			menuSlideSubmenuDropdown = menuSlide.find('.navik-menu-overlay > ul > li > ul li:has(ul)'),
197			menuSocialMedia = navikMenuOverlay.next('.menu-social-media'),
198			submenuVerticalListItem = $('.submenu-vertical > ul > li > ul li:has(ul)'),
199			submenuVerticalLink = $('.submenu-vertical > ul > li > ul a');
200
201		lineMenuOverlay.wrapAll('<span></span>');
202		menuOverlayLink.wrap('<div class="menu-overlay-link"></div>');
203		submenuVerticalLink.wrap('<div class="menu-overlay-link"></div>');
204		menuSlideSubmenuLink.wrap('<div class="menu-overlay-link"></div>');
205
206		/* ========== Submenu Toggle ========== */
207		menuOverlayListDropdown.each(function(){
208			var menuOverlayDropdownLink = $(this).children('.menu-overlay-link');
209			menuOverlayDropdownLink.prepend( '<span class="overlay-dropdown-plus"></span>' );
210			$(this).addClass('overlay_dropdown_menu');
211		});
212
213		submenuVerticalListItem.each(function(){
214			var submenuVerticalDropdownLink = $(this).children('.menu-overlay-link');
215			submenuVerticalDropdownLink.prepend( '<span class="overlay-dropdown-plus"></span>' );
216			$(this).addClass('overlay_dropdown_menu');
217		});
218
219		menuSlideSubmenuDropdown.each(function(){
220			var submenuVerticalDropdownLink = $(this).children('.menu-overlay-link');
221			submenuVerticalDropdownLink.prepend( '<span class="overlay-dropdown-plus"></span>' );
222			$(this).addClass('overlay_dropdown_menu');
223		});
224
225		$('.overlay_dropdown_menu > ul').addClass('overlay-submenu-close');
226		
227		$('.overlay-dropdown-plus').on("click", function(){
228			var $thisParent = $(this).parent('.menu-overlay-link');
229			$thisParent.next('ul').slideToggle(300).toggleClass('overlay-submenu-close');
230			$(this).toggleClass('overlay-dropdown-open');
231		});
232
233		navikMenuOverlay.add(menuSocialMedia).wrapAll('<div class="nav-menu-wrapper"></div>');
234
235		var overlayNavMenuWrapper = $('.nav-menu-wrapper');
236
237		overlayNavMenuWrapper.prepend(overlayLogoClone);
238		overlayNavMenuWrapper.find('.logo img').attr('src', menuWrapperLogoSrc);
239
240		var menuOverlayHover = $('.navik-menu-overlay > ul > .overlay_dropdown_menu > ul');
241
242		menuOverlayHover.each(function(){
243			$(this).on("mouseenter", function () {
244				$(this).parents("li").addClass("overlay-menu-hover");
245			});
246			$(this).on("mouseleave", function () {
247				$(this).parents("li").removeClass("overlay-menu-hover");
248			});
249		});
250
251		/* ========== Menu overlay open ========== */
252		burgerMenuOverlay.on("click", function(){
253
254			var overlayMenuList = $('.navik-menu-overlay > ul > li');
255
256			$(this).toggleClass('menu-open');
257			overlayNavMenuWrapper.toggleClass('overlay-menu-open');
258			overlayMenuList.removeClass("menuSlideIn");
259			
260			if ($(this).hasClass("menu-open")) {
261				overlayMenuTransition();
262				overlayMenuList.removeClass("menuSlideOut").addClass("menuFade");
263			}
264
265			if (!$(this).hasClass("menu-open")) {
266				overlayMenuList.addClass("menuSlideOut").removeClass("menuFade");
267			}
268
269		});
270
271		/* ========== Menu slide settings ========== */
272		var menuSlideNavWrapper = menuSlide.find('.nav-menu-wrapper'),
273			menuSlideNavLogo = menuSlideNavWrapper.find('.logo');
274
275		if (navikHeaderOverlay.hasClass('menu-slide')){
276			navikHeaderOverlay.removeClass('overlay-center-menu');
277		}
278
279		menuSlideNavLogo.remove();
280		menuSlideNavWrapper.after('<div class="slidemenu-bg-overlay"></div>');
281
282		$('.slidemenu-bg-overlay').on("click", function(){
283			menuSlideNavWrapper.removeClass('overlay-menu-open');
284			burgerMenuOverlay.removeClass('menu-open');
285		});
286
287	}
288
289	/* ========== Fixed sidebar menu ========== */
290	if ($('.navik-fixed-sidebar').length) {
291		var navikFixedSidebar = $('.navik-fixed-sidebar'),
292			navikMenuFixed = $('.navik-menu-fixed'),
293			navikSideContent = $('.navik-side-content'),
294			logoFixedSidebar = navikFixedSidebar.find('.logo'),
295			logoClone = logoFixedSidebar.clone(),
296			burgerMenuFixedSidebar = navikFixedSidebar.find('.burger-menu'),
297			burgerMenuDetach = burgerMenuFixedSidebar.detach(),
298			navikFixedDropdown = navikMenuFixed.find('li:has(ul)');
299
300		navikFixedSidebar.parent('body').addClass('body-fixed-sidebar');
301		navikFixedSidebar.after('<div class="fixedsidebar-bg-overlay"></div>').after(burgerMenuDetach);

302		navikSideContent.prepend(logoClone);
303
304		$('.navik-fixed-sidebar .logo, .navik-menu-fixed').wrapAll('<div class="fixed-menu-wrap"></div>');
305
306		var burgerMenuMove = navikFixedSidebar.next('.burger-menu'),
307			fixedSidebarlineMenu = burgerMenuMove.find('.line-menu');
308
309		fixedSidebarlineMenu.wrapAll('<span></span>');
310
311		/* ========== Side menu open on mobile ========== */
312		burgerMenuMove.on("click", function(){
313			$(this).toggleClass('menu-open');
314			navikFixedSidebar.toggleClass('fixed-sidebar-open');
315		});
316
317		$('.fixedsidebar-bg-overlay').on("click", function(){
318			navikFixedSidebar.removeClass('fixed-sidebar-open');
319			burgerMenuMove.removeClass('menu-open');
320		});
321
322		/* ========== Submenu collapse ========== */
323		navikFixedDropdown.each(function(){
324			$(this).append( '<span class="overlay-dropdown-plus"></span>' );
325		});
326
327		$('.overlay-dropdown-plus').on("click", function(){
328			$(this).prev('ul').slideToggle(300).toggleClass('submenu-collapse');
329			$(this).toggleClass('overlay-dropdown-open');
330		});
331	}
332
333	/* ========== Menu icon color ========== */
334	$('.navik-menu-icon').css('color', function () {
335		var iconColorAttr = $(this).data('fa-color');
336		return iconColorAttr;
337	});
338
339});