https://login.ureserv.com/menu/jquery.easymenu.js

1/**
2 * jquery.easymenu.js
3 * 这个一个jQuery的插件，它可以让您创建下拉试的导航菜单更加简单。
4 * 
5 * -- REQUIRE: jQuery 1.4+ --
6 * 
7 * @author	Hpyer
8 * @home	http://hpyer.cn
9 * @version	1.0.2
10 * @release	2014-01-03
11 */
12
13/*
14USAGE:
15
16<html>
17<head>
18<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
19<link rel="stylesheet" type="text/css" href="jquery.easymenu.css" />
20<script type="text/javascript" src="jquery.easymenu.js"></script>
21</head>
22<body>
23<ul id="menu" class="clearfix">
24	<li><a href="#">Home</a></li>
25	<li><a href="#">Tutorials</a>
26	<ul>
27		<li><a href="#">2nd Nav Link</a>
28			<ul>
29				<li><a href="#">3rd Nav Link</a></li>
30				<li><a href="#">3rd Nav Link</a></li>
31			</ul>
32		</li>
33		<li><a href="#">2nd Nav Link</a></li>
34		</ul>
35	</li>
36</ul>
37<script>$('#menu').easymenu();</script>
38</body>
39</html>
40*/
41
42(function($) {
43	$.fn.easymenu = function(options) {
44		var default_options = {
45			'hover_class' : 'hover',	// 鼠标进过菜单项时的class
46			'main_item_class' : 'main-item',	// 主菜单项的class
47			'sub_item_class' : 'sub-item',	// 子菜单项的class
48			'separator_class' : 'separator',	// 分隔符的class
49			'has_child_class' : 'has-child'	// 含有子菜单时的class
50		};
51		options = $.extend(default_options, options);
52
53		this.each(function(i, item) {
54			
55			// 区分主菜单项和子菜单项
56			$(item).children('li').addClass(options.main_item_class).find('li').addClass(options.sub_item_class);
57			
58			$(item)
59			// 判断子菜单项类型
60			.find('li').each(function(j, li) {
61				// 给空的菜单项添加separator类
62				if ($(li).html() == '') $(li).removeClass().addClass(options.separator_class);
63				// 如果有子菜单，则添加has_child类
64				if ($(li).children('ul').length > 0) $(li).addClass(options.has_child_class);
65			})
66
67			// 菜单事件处理
68			.hover(function() {
69				// 不是分隔符则添加hover类
70				if (!$(this).hasClass(options.separator_class)) $(this).addClass(options.hover_class);
71
72				// 有子菜单，则显示
73				if ($(this).hasClass(options.has_child_class)) {
74					var submenu = $(this).children('ul');
75					var is_first_submenu = $(this).hasClass(options.main_item_class);
76					var p_pos = $(this).position();				// 当前菜单项位置
77					var p_w = parseInt($(this).outerWidth());	// 当前菜单项宽
78					var p_h = parseInt($(this).outerHeight());	// 当前菜单项高
79					var w = parseInt(submenu.outerWidth());		// 当前子菜单宽
80					var h = parseInt(submenu.outerHeight());	// 当前子菜单高
81
82					// 区分处理一级子菜单的位置
83					var css = {};
84					var p_offset = $(this).offset();	// 当前菜单的位置
85					if (is_first_submenu) {
86						css.left = parseInt(p_pos.left);
87						css.top = parseInt(p_pos.top) + p_h;
88						// 如果超出屏幕，则将一级子菜单的left-当前子菜单宽+当前菜单项宽+1
89						if ((p_offset.left + w) > $(document).width()) css.left = css.left - w + p_w + 1;
90					} else {
91						css.left = parseInt(p_pos.left) + p_w - 1;
92						css.top = parseInt(p_pos.top);
93						// 如果超出屏幕，则将子菜单的left-当前子菜单宽-当前菜单项宽+1
94						if ((p_offset.left + p_w + w) >

94 $(document).width()) css.left = css.left - w - p_w + 1;
95					}
96
97					// 显示子菜单
98					submenu.css(css).show();
99				}
100			}, function() {
101				// 不是分隔符则移除hover类
102				if (!$(this).hasClass(options.separator_class)) $(this).removeClass(options.hover_class);
103
104				// 有子菜单，则隐藏
105				if ($(this).hasClass(options.has_child_class)) {
106					var submenu = $(this).children('ul');
107					submenu.hide();
108				}
109			});
110		});
111	}
112})(jQuery);