https://ukspeeder.com/js/a.whir.menu.js

1//by 20181015
2 $(function ($) {
3	$(window).on("resize", function (e) {
4	if ($(window).width() >= 1025) {
5		$("#header-menu").remove();
6			menu()
7		}else{
8			menuMoblie()
9			}           
10	}).trigger("resize");
11		//选中
12	$(".header-menu li").each(function(index) {
13     	$(this).attr("id", "m" + index);
14	});
15    $("#m"+m).addClass("aon");
16	open_menu()
17});
18
19function open_menu() {
20	//移动端打开菜单导航
21	$("#open_menu").click(function(e) {
22		if ($(this).hasClass("open_menu_on")) {
23			$(this).removeClass("open_menu_on")
24			$("#header-menu").removeClass("header-menu-show");
25		} else {
26			$(this).addClass("open_menu_on")
27			$("#header-menu").addClass("header-menu-show");
28		}
29	});
30	//移动端打开菜单导航 end	
31	}
32function menu() {
33	var window_width = $(window).width();
34	var a = $(".header-menu")
35	var b = a.find("ul")
36	var c = b.find("li")
37	//导航总宽度	
38	var m_total_width = b.width();
39	//栏目总数
40	var m_num = c.length
41	//栏目宽度px
42	var m_li_width = m_total_width / m_num
43	//栏目宽度%
44	c.width(100 / m_num + "%");
45	//判断是否有下拉 加上样式has-sub
46	$(".header-menu li").each(function(index) {
47		//鼠标经过一级栏目效果
48			$(this).bind("mouseover",function(e) {
49			$(this).addClass("hover aon");
50			$(this).siblings().removeClass("aon");
51		});
52		$(this).bind("mouseleave",function(e) {
53			$(this).removeClass("hover aon");
54			$("#m"+m).addClass("aon");
55		});
56		//
57		var sub_num = $(this).find(".sub").length
58		if (sub_num > 0) {
59			$(this).addClass("has-sub");
60			//不同环境判断
61
62			var x = $(this)
63			var y = x.find(".sub")
64			var z = y.find(".sub-menu")
65			var r = z.find("dl")
66
67			//下拉背景不全
68			if (a.hasClass("no-fullbground")) {
69				x.addClass("relative"); //相对li定位
70				$("body").css("overflow-x", "hidden"); //防止滚动条出现
71				y.width(window_width);
72			}
73			//横向
74			if (a.hasClass("sub-horizontal")) {
75				var r_width = r.width() //二级导航各自宽度
76				var r_height = r.height() //二级导航各自高度
77				rigth_side = window_width - x.position().left - ((window_width - $(".header").width()) / 2)
78				left_side = x.position().left - ((window_width - $(".header").width()) / 2) + x.width()
79				//alert(rigth_side)
80
81				if (m_num - x.index() <= 3) {
82					if (r_width > rigth_side) { //二级导航总宽度比导航右侧宽度大的时候
83						y.addClass("sub-right");
84						//判断右侧宽度太大加上宽度
85					//	if (r_width > left_side) {
86							r.width(left_side).height(r_height)
87						//	y.addClass("sub-right-txt-r");
88						//}
89						//
90					} else {
91						y.addClass("sub-left");
92					}
93				} else {
94					y.addClass("sub-left");
95					r.width(rigth_side).height(r_height)
96				}
97				//
98			}
99			//横向End
100			//下拉背景不全END
101
102			//下拉全背景
103			if (a.hasClass("fullbground")) {
104				y.show().width($(".header").width());
105				//alert(r.width())
106				var halfw=(window_width - $(".header").outerWidth()) / 2 
107			    leftw = r.width() / 2 - (x.outerWidth() / 2)
108				left_side = x.position().left - halfw
109				rigth_side = window_width - x.position().left - halfw - x.outerWidth()
110				aa=window_width-$(".header-menu").position().left-$(".header-menu").width()//判断导航右边距离是否等于左右距离（等于右边有无其他模块挡着）
111			    bb=window_width-x.position().left-halfw-x.outerWidth()//当前LI在内容$(".header-menu")右边距离
112				
113				cc=x.position().left//当前LI在内容$(".header-menu")左边距离
114				dd=cc-halfw
115					  //左边
116						if (leftw > left_side) {
117							y.css({"left": -left_side});
118							} else {
119							y.css({"left": -leftw});
120						}
121					  //左边 end				
122
123				//右边
124				if(aa==halfw){
125					
126					if(leftw> rigth_side) {
127						y.css({"left": "auto","right":-bb});
128					}else{
129					  //左边
130						if (leftw > left_side) {
131							y.css({"left": -left_side});
132							} else {
133							y.css({"left": -leftw});
134						}
135					  //左边 end
136						}
137					
138					}else{
139						
140					/**/				
141					if (m_num - x.index() <= 3) {
142					if (leftw > rigth_side) {
143						if (bb==0) { //导航菜单右边没有模块
144							y.css({"left": "auto","right": -(rigth_side-halfw)});
145						}else{
146						y.css({"left": "auto","right": -rigth_side});
147							}
148					} else {
149						y.css({
150							"left": -leftw
151						});

152					}
153				}
154				/**/
155						
156				}
157
158				//右边 end
159
160               // alert(r.width())
161				y.width(r.width()+1);
162				//
163				x.addClass("relative"); //相对li定位
164				x.hover(function(e) {
165					var e=$(this).index()
166					$(".sub-menu-layer"+e).height(y.outerHeight());
167					$(".sub-menu-layer"+e).stop(true,true).slideDown(300);                   
168                },function(){
169					var e=$(this).index()
170					$(".sub-menu-layer"+e).stop(true,true).slideUp(300);
171					});
172			}
173			//下拉全背景END
174
175			//不同环境判断End
176		}
177	});
178	
179	if (a.hasClass("fullbground")) {
180		
181		$(".sub-menu-layer").remove();
182		var strs=$(".header-menu li")
183		for (var i = 0; i < strs.length; i++) {
184			a.append("<div class='sub-menu-layer sub-menu-layer"+[i]+"'></div>");	
185            }
186			
187		 
188		}
189	//下拉菜单显示
190
191	$(".header-menu .has-sub").each(function() {
192
193		//下拉竖向图文 
194		if (a.hasClass("sub-vertical")) {
195            var s_halfw=(window_width - $(".header").outerWidth()) / 2
196			var sub_width = $(this).find(".sub").outerWidth()
197			var leftw = window_width - $(this).position().left - s_halfw
198			//alert(leftw)*2
199			if (sub_width > leftw) {
200				$(this).find(".sub").addClass("sub-position-right");
201			}
202			var n = $(this).find(".sub-menu").attr("data-level");
203			if (n > 0) {
204				var sub_width_n = $(this).find(".sub").outerWidth() * n
205				if (sub_width_n > leftw) {
206					$(this).find(".sub").addClass("sub-position-right");
207				}
208			}
209
210		}
211		//下拉竖向图文 End	
212		//多级
213		$(this).find(".sub").find(".sub-menu").find("dl").find("dt").each(function() {
214			var n = $(this).find("dl").find("dt").length
215			if (n >= 1) {
216				//$(this).find("i").remove();
217				$(this).addClass("sub-has-sub") //.append("<i></i>");
218			}
219		});
220
221		$(".header-menu .sub-has-sub").hover(function() {
222			$(this).children("dl:first").show();
223			$(this).addClass("aon");
224			$(this).siblings().removeClass("aon");
225		}, function() {
226			$(this).children("dl:first").hide();
227			$(this).removeClass("aon");
228		});
229		
230		/////////////////一级
231		//$(this).find(".sub").height("auto"); 
232
233		var subh=$(this).find(".sub").outerHeight()
234		$(this).find(".sub").css({"top":-subh});
235		$(this).find(".sub").hide();
236		//$(this).find(".sub").height(0);
237
238		$(this).mouseDelay(false).hover(function(e) {
239			$(this).find(".sub").css({"top":"100%"}).slideDown(300);
240		},function(){
241			$(this).find(".sub").css({"top":-subh}).slideUp(300);
242		});
243		
244		//end	
245	});
246}
247
248	//下拉菜单显示End		
249
250function menuMoblie() {
251	var html = $(".header-menu").html()
252	$("#header-menu").remove();
253	$(".header-menu").before("<div id='header-menu'>" + html + "</div>");
254	$("#open_menu").removeClass("open_menu_on")
255
256	$("#header-menu li").each(function() {
257		$(this).attr("style", " ").removeClass("relative");
258		$(this).find(".sub").attr("style", " ");
259		$(this).find(".sub dl").attr("style", " ");
260
261		var sub_num = $(this).find(".sub-menu").find("dt").length
262		if (sub_num > 0) {
263			$(this).addClass("has-sub");
264			$(this).find("em").append("<i class='op'></i>");
265		}
266
267		//多级
268		$(this).find(".sub").find(".sub-menu").find("dl").find("dt").each(function() {
269			var n = $(this).find("dl").find("dt").length
270			if (n >= 1) {
271				$(this).find("i").remove();
272				$(this).addClass("sub-has-sub").append("<i></i>");
273			}
274		});
275
276	});
277	//一级菜单	
278	$("#header-menu .has-sub em").bind("click", function() {
279		if ($(this).parent().hasClass("clickon")) {
280			$(this).parent().removeClass("clickon");
281			$(this).next(".sub").stop(true, true).slideUp();
282		} else {
283			$(this).parent().addClass("clickon");
284			$(this).next(".sub").stop(true, true).slideDown();
285			$(this).parent().siblings().find(".sub").stop(true, true).slideUp();
286			$(this).parent().siblings().removeClass("clickon");
287		}
288	});
289
290	//多级菜单
291	$("#header-menu .sub-has-sub i").bind("click", function() {
292		if ($(this).parent().hasClass("clickon")) {
293			$(this).parent().removeClass("clickon");

294			$(this).parent().children("dl:first").stop(true, true).slideUp();
295		} else {
296			$(this).parent().addClass("clickon");
297			$(this).parent().children("dl:first").stop(true, true).slideDown();
298		}
299	});
300
301}
302
303/*!
304 * jQuery.mouseDelay.js v1.2
305 * http://www.planeart.cn/?p=1073
306 * Copyright 2011, TangBin
307 * Dual licensed under the MIT or GPL Version 2 licenses.
308 */
309(function ($, plugin) {
310	var data = {}, id = 1, etid = plugin + 'ETID';
311	
312	// 延时构造器
313	$.fn[plugin] = function (speed, group) {
314		id ++;	
315		group = group || this.data(etid) || id;
316		speed = speed || 100;
317		
318		// 缓存分组名称到元素
319		if (group === id) this.data(etid, group);
320		
321		// 暂存官方的hover方法
322		this._hover = this.hover;
323		
324		// 伪装一个hover函数，并截获两个回调函数交给真正的hover函数处理
325		this.hover = function (over, out) {
326			over = over || $.noop;
327			out = out || $.noop;
328			this._hover(function (event) {
329				var elem = this;
330				clearTimeout(data[group]);
331				data[group] = setTimeout(function () {
332					over.call(elem, event);
333				}, speed);
334			}, function (event) {
335				var elem = this;
336				clearTimeout(data[group]);
337				data[group] = setTimeout(function () {
338					out.call(elem, event);
339				}, speed);
340			});
341			
342			return this;
343		};
344		
345		return this;
346	};
347	
348	// 冻结选定元素的延时器
349	$.fn[plugin + 'Pause'] = function () {
350		clearTimeout(this.data(etid));
351		return this;
352	};
353	
354	// 静态方法
355	$[plugin] = {
356		// 获取一个唯一分组名称
357		get: function () {
358			return id ++;
359		},
360		// 冻结指定分组的延时器
361		pause: function (group) {
362			clearTimeout(data[group]);
363		}
364	};
365	
366})(jQuery, 'mouseDelay');