javascript的弹出式菜单：ITPlusMenu v1.0.0.1_plusmenu。什么意思-CSDN博客

本文链接：https://blog.csdn.net/netWild/article/details/6022730

把在一个项目里写的JS弹出式菜单提取了出来，因为觉得以后还可以重用。

名字规则依旧：ITPlusMenu，当前是初始版本：1.0.0.1

不是网络上很常见的那种树形的多级菜单，而是一个相对简单的导航菜单

主要特点有：

1）松耦合式的封装，因此有很大的灵活性

2）开发时手边的浏览器较全，在IE7/8、FF、Opera 10.63上经测试均可正常使用

3）。。。自己感觉很顺手

先来个仿Opera的效果图：

调用示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  <mce:script language="javascript" type="text/javascript" src="ITPlusMenu.js" mce_src="ITPlusMenu.js"></mce:script> <title>ITPlusMenu Demo</title> </head> <body>  <div id="menuList"> <div id="menu01">第1个菜单项</div> <div id="menu02">第2个菜单项</div> <div id="menu03">第3个菜单项</div> <div id="menu04">第4个菜单项</div> </div>  <div id="menuList"> <div id="menu01_content">第1个菜单项的内容</div> <div id="menu02_content">第2个菜单项的内容</div> <div id="menu03_content">第3个菜单项的内容</div> <div id="menu04_content">第4个菜单项的内容</div> </div>  <mce:script language="javascript" type="text/javascript"></mce:script> </body> </html>

菜单文件源码（ITPlusMenu.js）：

/** * ITPlusMenu导航菜单库 * Author : Z,MingYu (netwild) 网无忌 * Date : 2010-11-20 0:57 * ver : 1.0.0.1 * Email : netwild@itplus.com.cn * QQ : 52100641 */ function ITPlusMenu(cfg){ var _self = this; var region = cfg.region ? cfg.region : "bottom" ; var padding = cfg.padding ? cfg.padding : 0; var interval = cfg.interval ? cfg.interval : 500; var menu = cfg.menu; var menuTimer = null; var x,y,menuW,menuH,contentW,contentH,showX,showY,objMenu,objContent; this.init = function(){ for(var menuItem in menu){ _self.addEvent(menuItem,menu[menuItem]); objMenu = $(menuItem); objContent = $(menu[menuItem]); menuW = objMenu.offsetWidth; menuH = objMenu.offsetHeight; contentW = objContent.offsetWidth; contentH = objContent.offsetHeight; x = objMenu.offsetLeft; y = objMenu.offsetTop; while(objMenu = objMenu.offsetParent){ x += objMenu.offsetLeft; y += objMenu.offsetTop; } if(region == "left" || region == "l"){ showX = x - contentW - padding ; showY = y;} if(region == "top" || region == "t"){ showX = x ; showY = y - contentH - padding;} if(region == "right" || region == "r"){ showX = x + menuW + padding ; showY = y;} if(region == "bottom" || region == "b"){ showX = x ; showY = y + menuH + padding;} objContent.style.left = showX + "px"; objContent.style.top = showY + "px"; } } this.addEvent = function(menuId,menuContentId){ $(menuId).onmouseover = function(){ _self.showMenu(menuId,menuContentId);} $(menuContentId).onmouseover = function(){ _self.showMenu(menuId,menuContentId);} $(menuId).onmouseout = function(){ _self.hideMenu(menuId,menuContentId);} $(menuContentId).onmouseout = function(){ _self.hideMenu(menuId,menuContentId);} } this.showMenu = function(menuId,menuContentId){ clearTimeout(menuTimer); for(var menuItem in menu){ $(menu[menuItem]).style.visibility = (menuItem == menuId ? "visible" : "hidden"); } } this.hideMenu = function(menuId,menuContentId){ menuTimer = setTimeout("$('"+menuContentId+"').style.visibility = 'hidden'",interval); } }