https://www.sorbentsystems.com/assets/js/menuzord.js

1/*
2Item name: Menuzord - Responsive Megamenu
3Item Url: http://codecanyon.net/item/menuzord-responsive-megamenu/8536398
4Author: marcoarib - [email protected]
5License: http://codecanyon.net/licenses
6*/
7
8(function($){
9	
10	jQuery.fn.menuzord = function(options){
11		var settings;
12		$.extend( settings = {
13			showSpeed: 300,
14			hideSpeed: 300,
15			trigger: "hover",
16			showDelay: 0,
17			hideDelay: 0,
18			effect: "fade",
19			align: "left",
20			responsive: true,
21			animation: "none",
22			indentChildren: true,
23			indicatorFirstLevel: "+",
24			indicatorSecondLevel: "+",
25			scrollable: true,
26			scrollableMaxHeight: '100%'
27		}, options);
28		
29		// variables
30		var menu_container = $(this);
31		var menu = $(menu_container).children(".menuzord-menu");
32		var menu_li = $(menu).find("li");
33		var showHideButton;
34		var mobileWidthBase = 1199;
35		var bigScreenFlag = 2000; // a number greater than "mobileWidthBase"
36		var smallScreenFlag = 200; // a number less than "mobileWidthBase"
37		
38		// dropdown/megamenu indicators
39		$(menu).children("li").children("a").each(function(){
40			if($(this).siblings(".dropdown, .megamenu").length > 0){
41				$(this).append("<span class='indicator'>" + settings.indicatorFirstLevel + "</span>");
42			}
43		});
44		$(menu).find(".dropdown").children("li").children("a").each(function(){
45			if($(this).siblings(".dropdown").length > 0){
46				$(this).append("<span class='indicator'>" + settings.indicatorSecondLevel + "</span>");
47			}
48		});
49		
50		// navigation alignment
51		if(settings.align == "right"){ 
52			$(menu).addClass("menuzord-right"); 
53		}
54		
55		// dropdown indentation (mobile mode)
56		if(settings.indentChildren){ 
57			$(menu).addClass("menuzord-indented"); 
58		}
59		
60		// responsive behavior
61		if(settings.responsive){ 

62			$(menu_container).addClass("menuzord-responsive").prepend("<a href='#' aria-label='menu dropdown non interactive' class='showhide'></a>");
63			showHideButton = $(menu_container).children(".showhide");
64		}
65
66		// scrollable menu
67		if(settings.scrollable){
68			if(settings.responsive){
69				$(menu).css("max-height", settings.scrollableMaxHeight).addClass("scrollable").append("<li class='scrollable-fix'></li>");
70			}
71		}
72		
73		// shows a dropdown
74		function showDropdown(item){
75			if(settings.effect == "fade")
76				$(item).children(".dropdown, .megamenu").stop(true, true).delay(settings.showDelay).fadeIn(settings.showSpeed).addClass(settings.animation);
77			else
78				$(item).children(".dropdown, .megamenu").stop(true, true).delay(settings.showDelay).slideDown(settings.showSpeed).addClass(settings.animation);
79		}
80		
81		// hides a dropdown
82		function hideDropdown(item){
83			if(settings.effect == "fade")
84				$(item).children(".dropdown, .megamenu").stop(true, true).delay(settings.hideDelay).fadeOut(settings.hideSpeed).removeClass(settings.animation);
85			else
86				$(item).children(".dropdown, .megamenu").stop(true, true).delay(settings.hideDelay).slideUp(settings.hideSpeed).removeClass(settings.animation);
87			$(item).children(".dropdown, .megamenu").find(".dropdown, .megamenu").stop(true, true).delay(settings.hideDelay).fadeOut(settings.hideSpeed);
88		}
89		
90		// landscape mode
91		function landscapeMode(){
92			$(menu).find(".dropdown, .megamenu").hide(0);
93			if(navigator.userAgent.match(/Mobi/i) || window.navigator.msMaxTouchPoints > 0 || settings.trigger == "click"){
94				$(".menuzord-menu > li > a, .menuzord-menu ul.dropdown li a").bind("click touchstart", function(e){
95					e.stopPropagation(); 
96					e.preventDefault();
97					$(this).parent("li").siblings("li").find(".dropdown, .megamenu").stop(true, true).fadeOut(300);
98					if($(this).siblings(".dropdown, .megamenu").css("display") == "none"){
99						showDropdown($(this).parent("li"));
100						return false; 
101					}
102					else{
103						hideDropdown($(this).parent("li"));
104					}
105					window.location.href = $(this).attr("href");
106				});
107				$(document).bind("click.menu touchstart.menu", function(ev){
108					if($(ev.target).closest(".menuzord").length == 0){
109						$(".menuzord-menu").find(".dropdown, .megamenu").fadeOut(300);
110					}
111				});
112			}
113			else{
114				$(menu_li).bind("mouseenter", function(){
115					showDropdown(this);
116				}).bind("mouseleave", function(){
117					hideDropdown(this);
118				});
119			}
120		}
121		
122		// portrait mode
123		function portraitMode(){
124			$(menu).find(".dropdown, .megamenu").hide(0);
125			$(menu).find(".indicator").each(function(){
126				if($(this).parent("a").siblings(".dropdown, .megamenu").length > 0){
127					$(this).bind("click", function(e){
128						$(menu).scrollTo({top: 45, left: 0}, 600);
129						if($(this).parent().prop("tagName") == "A"){
130							e.preventDefault();
131						}
132						if($(this).parent("a").siblings(".dropdown, .megamenu").css("display") == "none"){
133							$(this).parent("a").siblings(".dropdown, .megamenu").delay(settings.showDelay).slideDown(settings.showSpeed);
134							$(this).parent("a").parent("li").siblings("li").find(".dropdown, .megamenu").slideUp(settings.hideSpeed);
135						}
136						else{
137							$(this).parent("a").siblings(".dropdown, .megamenu").slideUp(settings.hideSpeed);
138						}
139					});
140				}
141			});
142		}
143		
144		// Fix the submenu on the right side
145		function fixSubmenuRight(){
146			var submenus = $(menu).children("li").children(".dropdown, .megamenu");
147			if($(window).innerWidth() > mobileWidthBase){
148				var menu_width = $(menu_container).outerWidth(true);
149				for(var i = 0; i < submenus.length; i++){
150					if($(submenus[i]).parent("li").position().left + $(submenus[i]).outerWidth() > menu_width){
151						$(submenus[i]).css("right", 0);
152					}
153					else{
154						if(menu_width == $(submenus[i]).outerWidth() || (menu_width - $(submenus[i]).outerWidth()) < 20){
155							$(submenus[i]).css("left", 0);			
156						}
157						if($(submenus[i]).parent("li").position().left + $(submenus[i]).outerWidth() < menu_width){
158							$(submenus[i]).css("right", "auto");
159						}
160					}
161				}
162			}
163		}
164		
165		// show the bar to show/hide menu items on mobile
166		function showMobileBar(){
167			$(menu).hide(0);
168			$(showHideButton).show(0).click(function(){
169				if($(menu).css("display") == "none")
170					$(menu).slideDown(settings.showSpeed);
171				else
172					$(menu).slideUp(settings.hideSpeed).find(".dropdown, .megamenu").hide(settings.hideSpeed);
173			});
174		}
175		
176		// hide the bar to show/hide menu items on mobile
177		function hideMobileBar(){
178			$(menu).show(0);
179			$(showHideButton).hide(0);
180		}
181		
182		// unbind events
183		function unbindEvents(){
184			$(menu_container).find("li, a").unbind();
185			$(document).unbind("click.menu touchstart.menu");
186		}
187		
188		// Menuzord tabs
189		function menuTabs(){
190			function startTab(tab){
191				var TabNavs = $(tab).find(".menuzord-tabs-nav > li");
192				var TabContents = $(tab).find(".menuzord-tabs-content");
193				$(TabNavs).bind("click touchstart", function(e){
194					e.stopPropagation(); 
195					e.preventDefault();
196					$(TabNavs).removeClass("active");
197					$(this).addClass("active");
198					$(TabContents).hide(0);
199					$(TabContents[$(this).index()]).show(0);
200				});
201			}
202			if($(menu).find(".menuzord-tabs").length > 0){
203				var menuTabs = $(menu).find(".menuzord-tabs");
204				for(var i = 0; i < menuTabs.length; i++){
205					startTab(menuTabs[i]);
206				}
207			}
208		}
209		
210		// return window's width
211		function windowWidth(){
212			return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
213		}
214		
215		// navigation start function
216		function startMenu(){
217			fixSubmenuRight();
218			if(windowWidth() <= mobileWidthBase && bigScreenFlag > mobileWidthBase){
219				unbindEvents();
220				if(settings.responsive){
221					showMobileBar();
222					portraitMode();
223				}
224				else{
225					landscapeMode();
226				}
227			}
228			if(windowWidth() > mobileWidthBase && smallScreenFlag <= mobileWidthBase){
229				unbindEvents();
230				hideMobileBar();
231				landscapeMode();
232			}
233			bigScreenFlag = windowWidth();
234			smallScreenFlag = windowWidth();
235			menuTabs();
236			/* IE8 fix */
237			if(/MSIE (\d+\.\d+);/.test(navigator.userAgent) && windowWidth() < mobileWidthBase){
238				var ieversion = new Number(RegExp.$1);
239				if(ieversion == 8){
240					$(showHideButton).hide(0);
241					$(menu).show(0);
242					unbindEvents();
243					landscapeMode();
244				}
245			}
246		}		
247		
248		startMenu();
249		$(window).resize(function(){
250			var t = setTimeout(function() {
251				startMenu();
252			}, 400);
253			fixSubmenuRight();
254		});
255		
256	}
257}(jQuery));