https://algogene.com/static/responsiveNav/js/main.js

1jQuery(document).ready(function(){
2	//cache DOM elements
3	var mainContent = $('.cd-main-content'),
4		header = $('.cd-main-header'),
5		sidebar = $('.cd-side-nav'),
6		sidebarTrigger = $('.cd-nav-trigger'),
7		topNavigation = $('.cd-top-nav'),
8		searchForm = $('.cd-search'),
9		accountInfo = $('.account');
10
11	//on resize, move search and top nav position according to window width
12	var resizing = false;
13	moveNavigation();
14	$(window).on('resize', function(){
15		if( !resizing ) {
16			(!window.requestAnimationFrame) ? setTimeout(moveNavigation, 300) : window.requestAnimationFrame(moveNavigation);
17			resizing = true;
18		}
19	});
20
21	//on window scrolling - fix sidebar nav
22	var scrolling = false;
23	checkScrollbarPosition();
24	$(window).on('scroll', function(){
25		if( !scrolling ) {
26			(!window.requestAnimationFrame) ? setTimeout(checkScrollbarPosition, 300) : window.requestAnimationFrame(checkScrollbarPosition);
27			scrolling = true;
28		}
29	});
30
31	//mobile only - open sidebar when user clicks the hamburger menu
32	sidebarTrigger.on('click', function(event){
33		event.preventDefault();
34		$([sidebar, sidebarTrigger]).toggleClass('nav-is-visible');
35	});
36
37	//click on item and show submenu
38	$('.has-children > a').on('click', function(event){
39		var mq = checkMQ(),
40			selectedItem = $(this);
41		if( mq == 'mobile' || mq == 'tablet' ) {
42			event.preventDefault();
43			if( selectedItem.parent('li').hasClass('selected')) {
44				selectedItem.parent('li').removeClass('selected');
45			} else {
46				sidebar.find('.has-children.selected').removeClass('selected');
47				accountInfo.removeClass('selected');
48				selectedItem.parent('li').addClass('selected');
49			}
50		}
51	});
52
53	//click on account and show submenu - desktop version only
54	accountInfo.children('a').on('click', function(event){
55		var mq = checkMQ(),
56			selectedItem = $(this);
57		if( mq == 'desktop') {
58			event.preventDefault();
59			accountInfo.toggleClass('selected');
60			sidebar.find('.has-children.selected').removeClass('selected');
61		}
62	});
63
64	$(document).on('click', function(event){
65		if( !$(event.target).is('.has-children a') ) {
66			sidebar.find('.has-children.selected').removeClass('selected');
67			accountInfo.removeClass('selected');
68		}
69	});
70
71	//on desktop - differentiate between a user trying to hover over a dropdown item vs trying to navigate into a submenu's contents
72	sidebar.children('ul').menuAim({
73        activate: function(row) {
74        	$(row).addClass('hover');
75        },
76        deactivate: function(row) {
77        	$(row).removeClass('hover');
78        },
79        exitMenu: function() {
80        	sidebar.find('.hover').removeClass('hover');
81        	return true;
82        },
83        submenuSelector: ".has-children",
84    });
85
86	function checkMQ() {
87		//check if mobile or desktop device
88		return window.getComputedStyle(document.querySelector('.cd-main-content'), '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, "");
89	}
90
91	function moveNavigation(){
92  		var mq = checkMQ();
93        
94        if ( mq == 'mobile' && topNavigation.parents('.cd-side-nav').length == 0 ) {
95        	detachElements();
96			topNavigation.appendTo(sidebar);
97			searchForm.removeClass('is-hidden').prependTo(sidebar);
98		} else if ( ( mq == 'tablet' || mq == 'desktop') &&  topNavigation.parents('.cd-side-nav').length > 0 ) {
99			detachElements();
100			searchForm.insertAfter(header.find('.cd-logo'));
101			topNavigation.appendTo(header.find('.cd-nav'));
102		}
103		checkSelected(mq);
104		resizing = false;
105	}
106
107	function detachElements() {
108		topNavigation.detach();
109		searchForm.detach();
110	}
111
112	function checkSelected(mq) {
113		//on desktop, remove selected class from items selected on mobile/tablet version
114		if( mq == 'desktop' ) $('.has-children.selected').removeClass('selected');
115	}
116
117	
118	function checkScrollbarPosition() {
119		var mq = checkMQ();
120		
121		if( mq != 'mobile' ) {
122			var sidebarHeight = sidebar.outerHeight(),
123				windowHeight = $(window).height(),
124				mainContentHeight = mainContent.outerHeight(),
125				scrollTop = $(window).scrollTop();
126
127			( ( scrollTop + windowHeight > sidebarHeight ) && ( mainContentHeight - sidebarHeight != 0 ) ) ? sidebar.addClass('is-fixed').css('bottom', 0) : sidebar.removeClass('is-fixed').attr('style', '');
128		}
129		scrolling = false;

130	}
131	
132});