https://www.essomazout.be/scripts/app/menu.js

1//jQuery.noConflict();
2
3// Mobile menu
4jQuery(document).ready(function($) {
5
6	var $body = $('body'),
7		$menu_holder = $('#menu-primary-holder'),
8		$toggle = $('.menu-toggle', $menu_holder),
9		$menu = $('.menu', $menu_holder).first(),
10		$wrapper = $('#wrapper'),
11		$submenu_parents = $('.parent > a', $menu_holder),
12		$submenus = $('.sub-menu', $menu_holder),
13		$dashboard_nav = $('#dashboard-nav'),
14		$nav_bar = $('#nav-bar > .container'),
15		$nav_overlay = $('<div class="nav-overlay">'),
16		open_state = 'is-open',
17		hide_overflow = 'hide-overflow-x',
18		body_class = 'has-overlay',
19		resize = null,
20		mobile = true;
21	
22	$wrapper.addClass(hide_overflow); // Hide overflow initially
23	// $submenus.hide(); // Hide sub menus
24
25	// Attach handlers
26	$toggle.on('click.opmenu', toggleHandler); // Show/hide menu
27	$submenu_parents.on('click.opmenu', submenuHandler); // Handle sub menus
28	$nav_overlay.on('click.opmenu', submenuHandler); // Handle nav overlay click
29
30
31	function toggleHandler(event) {
32		event.preventDefault();
33
34		var	wrapper_width = $wrapper.width(),
35			menu_width = $menu.outerWidth(),
36			offset = ($menu.hasClass(open_state)) ? 0 : -1*menu_width;
37
38		// If menu is open, wait before hiding overflow and scroll to top of page
39		if (!$menu.hasClass(open_state)) {
40			$wrapper.removeClass(hide_overflow);
41			$('html,body').animate({scrollTop: 0}, 200);
42		}
43
44		// Toggle state class
45		$menu.toggleClass(open_state); 
46
47		// Open/close menu
48		$wrapper.css('width', wrapper_width).stop(true, true).animate({'marginLeft': offset}, 200, function() {
49			if (!$menu.hasClass(open_state)) $wrapper.addClass(hide_overflow);
50		});
51
52		// Reset menu on resize
53		$(window).resize(function() {
54			if ($wrapper.prop('style')) $wrapper.removeAttr('style');
55
56			if ($menu.hasClass(open_state)) $menu.removeClass(open_state);
57		});
58	}
59
60	function submenuHandler(event) {
61		event.preventDefault();
62
63		var $scope = $(this);
64
65		$submenu_parents.not($scope).parent().removeClass(open_state);
66		// $submenus.hide();
67
68		if ($scope.parent().hasClass(open_state)) {
69			// $scope.next('.sub-menu').stop(true, true).hide(); // Open/close sub menus
70			$scope.parent().removeClass(open_state); // Toggle state class
71		} else {
72			// $scope.next('.sub-menu').stop(true, true).slideDown(0); // Open/close sub menus
73			$scope.parent().addClass(open_state); // Toggle state class
74		}
75
76		// Toggle body class
77		if ($menu.find('.'+open_state).length) {
78			$body.addClass(body_class);
79			$wrapper.append($nav_overlay);
80			$nav_overlay.on('click.opmenu', submenuHandler); // Re-attach handler
81		} else {
82			$body.removeClass(body_class);
83			$nav_overlay.remove();
84		}
85	}
86
87	// Handle dashboard nav
88	function checkForMobile() {
89		// If is mobile view
90		if ($(window).width() < 1275) {
91			// Check if change from desktop view
92			if (!mobile) {
93				mobile = true;
94				return true;
95			}
96		} else {
97			// Check if change from mobile view
98			if (mobile) {
99				mobile = false;
100				return false;
101			}
102		}
103	}
104
105	function repositionDashboardNav(mobile) {
106		// Check if view has changed
107		if (typeof mobile !== 'undefined') {
108			// If mobile move to fly out menu, else move to end of nav bar
109			if (mobile) $dashboard_nav.insertAfter($menu);
110			else $dashboard_nav.appendTo($nav_bar);
111		}
112	}
113	//repositionDashboardNav( checkForMobile() );
114
115	$(window).resize(function() {
116		clearTimeout(resize);
117		resize = setTimeout(function() {
118
119			//repositionDashboardNav( checkForMobile() );
120
121		}, 250);	
122	});
123});