mm_menu.js（实现鼠标移入横向显示二级菜单效果）(1)

/**
* mm_menu 20MAR2002 Version 6.0
* Andy Finnell, March 2002
* Copyright (c) 2000-2002 Macromedia, Inc.
*
* based on menu.js
* by gary smith, July 1997
* Copyright (c) 1997-1999 Netscape Communications Corp.
*
* Netscape grants you a royalty free license to use or modify this
* software provided that this copyright notice appears on all copies.
* This software is provided "AS IS," without a warranty of any kind.
*/
function Menu(label, mw, mh, fnt, fs, fclr, fhclr, bg, bgh, halgn, valgn, pad, space, to, sx, sy, srel, opq, vert, idt, aw, ah)
{
this.version = "020320 [Menu; mm_menu.js]";//形式
this.type = "Menu";//类型
this.menuWidth = mw;//宽度
this.menuItemHeight = mh;//高度
this.fontSize = fs;//字体大小
this.fontWeight = "plain";//字体为普通
this.fontFamily = fnt;//字体父类
this.fontColor = fclr;//字体颜色
this.fontColorHilite = fhclr;//选中之后的加亮显示颜色
this.bgColor = "#555555";//背景颜色
this.menuBorder = 1;//边框
this.menuBgOpaque=opq;//透明度
this.menuItemBorder = 1;//选中的当前项边框
this.menuItemIndent = idt;//选中的当前项锯齿
this.menuItemBgColor = bg;//选中的当前项背景
this.menuItemVAlign = valgn;//垂直方式
this.menuItemHAlign = halgn;//水平方式
this.menuItemPadding = pad;//字周围间隔
this.menuItemSpacing = space;//字间距
this.menuLiteBgColor = "#ffffff";
this.menuBorderBgColor = "#777777";//边框颜色
this.menuHiliteBgColor = bgh;//高亮效果颜色
this.menuContainerBgColor = "#cccccc";
this.childMenuIcon = "arrows.gif";//子菜单图象
this.submenuXOffset = sx;//坐标值
this.submenuYOffset = sy;//坐标值
this.submenuRelativeToItem = srel;//相对
this.vertical = false;//垂直
this.items = new Array();//栏目
this.actions = new Array();
this.childMenus = new Array();//子栏目
this.hideOnMouseOut = true;//鼠标移出隐藏
this.hideTimeout = to;//隐藏时间
this.addMenuItem = addMenuItem;//添加栏目
this.writeMenus = writeMenus;//写栏目
this.MM_showMenu = MM_showMenu;
this.onMenuItemOver = onMenuItemOver;//栏目移入
this.onMenuItemAction = onMenuItemAction;//栏目动作
this.hideMenu = hideMenu;//隐藏栏目
this.hideChildMenu = hideChildMenu;//隐藏子栏目
if (!window.menus) window.menus = new Array();//如果桌面栏目不存在则声明新的栏目数组
this.label = " " + label;//标签
window.menus[this.label] = this;//将属性传递给栏目标签
window.menus[window.menus.length] = this;//将菜单数量传递给栏目
if (!window.activeMenus) window.activeMenus = new Array();//如果活动栏目不存在则声明新的活动栏目数组
}//创建栏目
function addMenuItem(label, action) {// 添加栏目
this.items[this.items.length] = label;//栏目数量
this.actions[this.actions.length] = action;//栏目动作
}
function FIND(item) {
if( window.mmIsOpera ) return(document.getElementById(item));
if (document.all) return(document.all[item]);
if (document.getElementById) return(document.getElementById(item));
return(false);
}
function writeMenus(container) {
if (window.triedToWriteMenus) return;
var agt = navigator.userAgent.toLowerCase();
window.mmIsOpera = agt.indexOf("opera") != -1;
if (!container && document.layers) {
window.delayWriteMenus = this.writeMenus;
var timer = setTimeout('delayWriteMenus()', 500);
container = new Layer(100);
clearTimeout(timer);
} else if (document.all || document.hasChildNodes || window.mmIsOpera) {
document.writeln('<span id="menuContainer"></span>');
container = FIND("menuContainer");
}
window.mmHideMenuTimer = null;
if (!container) return;
window.triedToWriteMenus = true;
container.isContainer = true;
container.menus = new Array();
for (var i=0; i<window.menus.length; i++)
container.menus[i] = window.menus[i];
window.menus.length = 0;
var countMenus = 0;
var countItems = 0;
var top = 0;
var content = '';
var lrs = false;
var theStat = "";
var tsc = 0;
if (document.layers) lrs = true;
for (var i=0; i<container.menus.length; i++, countMenus++) {
var menu = container.menus[i];
if (menu.bgImageUp || !menu.menuBgOpaque) {
menu.menuBorder = 0;
menu.menuItemBorder = 0;
}
if (lrs) {
var menuLayer = new Layer(100, container);
var lite = new Layer(100, menuLayer);
lite.top = menu.menuBorder;
lite.left = menu.menuBorder;
var body = new Layer(100, lite);
body.top = menu.menuBorder;
body.left = menu.menuBorder;
} else {
content += ''+
'<div id="menuLayer'+ countMenus +'" style="position:absolute;z-index:1;left:10px;top:'+ (i * 100) +'px;visibility:hidden;color:' + menu.menuBorderBgColor + ';">\n'+
' <div id="menuLite'+ countMenus +'" style="position:absolute;z-index:1;left:'+ menu.menuBorder +'px;top:'+ menu.menuBorder +'px;visibility:hide;" onmouseout="mouseoutMenu();">\n'+
' <div id="menuFg'+ countMenus +'" style="position:absolute;left:'+ menu.menuBorder +'px;top:'+ menu.menuBorder +'px;visibility:hide;">\n'+
'';
}
var x=i;
for (var i=0; i<menu.items.length; i++) {
var item = menu.items[i];
var childMenu = false;
var defaultHeight = menu.fontSize+2*menu.menuItemPadding;
if (item.label) {
item = item.label;
childMenu = true;
}
menu.menuItemHeight = menu.menuItemHeight || defaultHeight;
var itemProps = '';
if( menu.fontFamily != '' ) itemProps += 'font-family:' + menu.fontFamily +';';
itemProps += 'font-weight:' + menu.fontWeight + ';fontSize:' + menu.fontSize + 'px;';
if (menu.fontStyle) itemProps += 'font-style:' + menu.fontStyle + ';';
if (document.all || window.mmIsOpera)
itemProps += 'font-size:' + menu.fontSize + 'px;" onclick="onMenuItemAction(null,this);';
else if (!document.layers) {
itemProps += 'font-size:' + menu.fontSize + 'px;';
}
var l;
if (lrs) {
var lw = menu.menuWidth;
if( menu.menuItemHAlign == 'right' ) lw -= menu.menuItemPadding;
l = new Layer(lw,body);
}
var itemLeft = 0;
var itemTop = i*menu.menuItemHeight;
if( !menu.vertical ) {
itemLeft = i*menu.menuWidth;
itemTop = 0;
}
var dTag = '<div id="menuItem'+ countItems +'" style="position:absolute;left:' + itemLeft + 'px;top:'+ itemTop +'px;'+ itemProps +'">';
var dClose = '</div>'
if (menu.bgImageUp) dTag = '<div id="menuItem'+ countItems +'" style="background:url('+menu.bgImageUp+');position:absolute;left:' + itemLeft + 'px;top:'+ itemTop +'px;'+ itemProps +'">';
var left = 0, top = 0, right = 0, bottom = 0;
left = 1 + menu.menuItemPadding + menu.menuItemIndent;
right = left + menu.menuWidth - 2*menu.menuItemPadding - menu.menuItemIndent;
if( menu.menuItemVAlign == 'top' ) top = menu.menuItemPadding;
if( menu.menuItemVAlign == 'bottom' ) top = menu.menuItemHeight-menu.fontSize-1-menu.menuItemPadding;
if( menu.menuItemVAlign == 'middle' ) top = ((menu.menuItemHeight/2)-(menu.fontSize/2)-1);
bottom = menu.menuItemHeight - 2*menu.menuItemPadding;
var textProps = 'position:absolute;left:' + left + 'px;top:' + top + 'px;';
if (lrs) {
textProps +=itemProps + 'right:' + right + ';bottom:' + bottom + ';';
dTag = "";
dClose = "";
}

if(document.all && !window.mmIsOpera) {
item = '<div align="' + menu.menuItemHAlign + '">' + item + '</div>';
} else if (lrs) {
item = '<div style="text-align:' + menu.menuItemHAlign + ';">' + item + '</div>';
} else {
var hitem = null;
if( menu.menuItemHAlign != 'left' ) {
if(window.mmIsOpera) {
var operaWidth = menu.menuItemHAlign == 'center' ? -(menu.menuWidth-2*menu.menuItemPadding) : (menu.menuWidth-6*menu.menuItemPadding);
hitem = '<div id="menuItemHilite' + countItems + 'Shim" style="position:absolute;top:1px;left:' + menu.menuItemPadding + 'px;width:' + operaWidth + 'px;text-align:'
+ menu.menuItemHAlign + ';visibility:visible;">' + item + '</div>';
item = '<div id="menuItemText' + countItems + 'Shim" style="position:absolute;top:1px;left:' + menu.menuItemPadding + 'px;width:' + operaWidth + 'px;text-align:'
+ menu.menuItemHAlign + ';visibility:visible;">' + item + '</div>';
} else {
hitem = '<div id="menuItemHilite' + countItems + 'Shim" style="position:absolute;top:1px;left:1px;right:-' + (left+menu.menuWidth-3*menu.menuItemPadding) + 'px;text-align:'
+ menu.menuItemHAlign + ';visibility:visible;">' + item + '</div>';
item = '<div id="menuItemText' + countItems + 'Shim" style="position:absolute;top:1px;left:1px;right:-' + (left+menu.menuWidth-3*menu.menuItemPadding) + 'px;text-align:'
+ menu.menuItemHAlign + ';visibility:visible;">' + item + '</div>';
}
} else hitem = null;
}
if(document.all && !window.mmIsOpera) item = '<div id="menuItemShim' + countItems + '" style="position:absolute;left:0px;top:0px;">' + item + '</div>';
var dText = '<div id="menuItemText'+ countItems +'" style="' + textProps + 'color:'+ menu.fontColor +';">'+ item +' </div>\n'
+ '<div id="menuItemHilite'+ countItems +'" style="' + textProps + 'color:'+ menu.fontColorHilite +';visibility:hidden;">'
+ (hitem||item) +' </div>';
if (childMenu) content += ( dTag + dText + '<div id="childMenu'+ countItems +'" style="position:absolute;left:0px;top:3px;"><img src="'+ menu.childMenuIcon +'"></div>\n' + dClose);
else content += ( dTag + dText + dClose);
if (lrs) {
l.document.open("text/html");
l.document.writeln(content);
l.document.close();
content = '';
theStat += "-";
tsc++;
if (tsc > 50) {
tsc = 0;
theStat = "";
}
status = theStat;
}
countItems++;
}
if (lrs) {
var focusItem = new Layer(100, body);
focusItem.visiblity="hidden";
focusItem.document.open("text/html");
focusItem.document.writeln(" ");
focusItem.document.close();
} else {
content += ' <div id="focusItem'+ countMenus +'" style="position:absolute;left:0px;top:0px;visibility:hide;" onclick="onMenuItemAction(null,this);"> </div>\n';
content += ' </div>\n </div>\n</div>\n';
}
i=x;
}
if (document.layers) {
container.clip.width = window.innerWidth;
container.clip.height = window.innerHeight;
container. = mouseoutMenu;
container.menuContainerBgColor = this.menuContainerBgColor;
for (var i=0; i<container.document.layers.length; i++) {
proto = container.menus[i];
var menu = container.document.layers[i];
container.menus[i].menuLayer = menu;
container.menus[i].menuLayer.Menu = container.menus[i];
container.menus[i].menuLayer.Menu.container = container;
var body = menu.document.layers[0].document.layers[0];
body.clip.width = proto.menuWidth || body.clip.width;
body.clip.height = proto.menuHeight || body.clip.height;
for (var n=0; n<body.document.layers.length-1; n++) {
var l = body.document.layers
;
l.Menu = container.menus[i];
l.menuHiliteBgColor = proto.menuHiliteBgColor;
l.document.bgColor = proto.menuItemBgColor;
l.saveColor = proto.menuItemBgColor;
l. = proto.onMenuItemOver;
l.onclick = proto.onMenuItemAction;
l.mmaction = container.menus[i].actions
;
l.focusItem = body.document.layers[body.document.layers.length-1];
l.clip.width = proto.menuWidth || body.clip.width;
l.clip.height = proto.menuItemHeight || l.clip.height;
if (n>0) {
if( l.Menu.vertical ) l.top = body.document.layers[n-1].top + body.document.layers[n-1].clip.height + proto.menuItemBorder + proto.menuItemSpacing;
else l.left = body.document.layers[n-1].left + body.document.layers[n-1].clip.width + proto.menuItemBorder + proto.menuItemSpacing;
}
l.hilite = l.document.layers[1];
if (proto.bgImageUp) l.background.src = proto.bgImageUp;
l.document.layers[1].isHilite = true;
if (l.document.layers.length > 2) {
l.childMenu = container.menus[i].items
.menuLayer;
l.document.layers[2].left = l.clip.width -13;
l.document.layers[2].top = (l.clip.height / 2) -4;
l.document.layers[2].clip.left += 3;
l.Menu.childMenus[l.Menu.childMenus.length] = l.childMenu;
}
}
if( proto.menuBgOpaque ) body.document.bgColor = proto.bgColor;
if( proto.vertical ) {
body.clip.width = l.clip.width +proto.menuBorder;
body.clip.height = l.top + l.clip.height +proto.menuBorder;
} else {
body.clip.height = l.clip.height +proto.menuBorder;
body.clip.width = l.left + l.clip.width +proto.menuBorder;
if( body.clip.width > window.innerWidth ) body.clip.width = window.innerWidth;
}
var focusItem = body.document.layers
;
focusItem.clip.width = body.clip.width;
focusItem.Menu = l.Menu;
focusItem.top = -30;
focusItem.captureEvents(Event.MOUSEDOWN);
focusItem. = onMenuItemDown;
if( proto.menuBgOpaque ) menu.document.bgColor = proto.menuBorderBgColor;
var lite = menu.document.layers[0];
if( proto.menuBgOpaque ) lite.document.bgColor = proto.menuLiteBgColor;
lite.clip.width = body.clip.width +1;
lite.clip.height = body.clip.height +1;
menu.clip.width = body.clip.width + (proto.menuBorder * 3) ;
menu.clip.height = body.clip.height + (proto.menuBorder * 3);
}
} else {
if ((!document.all) && (container.hasChildNodes) && !window.mmIsOpera) {
container.innerHTML=content;
} else {
container.document.open("text/html");
container.document.writeln(content);
container.document.close();
}
if (!FIND("menuLayer0")) return;
var menuCount = 0;
for (var x=0; x<container.menus.length; x++) {
var menuLayer = FIND("menuLayer" + x);
container.menus[x].menuLayer = "menuLayer" + x;
menuLayer.Menu = container.menus[x];
menuLayer.Menu.container = "menuLayer" + x;
menuLayer.style.zindex = 1;
var s = menuLayer.style;
s.pixeltop = -300;
s.pixelleft = -300;
s.top = '-300px';
s.left = '-300px';
var menu = container.menus[x];
menu.menuItemWidth = menu.menuWidth || menu.menuIEWidth || 140;
if( menu.menuBgOpaque ) menuLayer.style.backgroundColor = menu.menuBorderBgColor;
var top = 0;
var left = 0;
menu.menuItemLayers = new Array();
for (var i=0; i<container.menus[x].items.length; i++) {
var l = FIND("menuItem" + menuCount);
l.Menu = container.menus[x];
l.Menu.menuItemLayers[l.Menu.menuItemLayers.length] = l;
if (l.addEventListener || window.mmIsOpera) {
l.style.width = menu.menuItemWidth + 'px';
l.style.height = menu.menuItemHeight + 'px';
l.style.pixelWidth = menu.menuItemWidth;
l.style.pixelHeight = menu.menuItemHeight;
l.style.top = top + 'px';
l.style.left = left + 'px';
if(l.addEventListener) {
l.addEventListener("mouseover", onMenuItemOver, false);
l.addEventListener("click", onMenuItemAction, false);
l.addEventListener("mouseout", mouseoutMenu, false);
}
if( menu.menuItemHAlign != 'left' ) {
l.hiliteShim = FIND("menuItemHilite" + menuCount + "Shim");
l.hiliteShim.style.visibility = "inherit";
l.textShim = FIND("menuItemText" + menuCount + "Shim");
l.hiliteShim.style.pixelWidth = menu.menuItemWidth - 2*menu.menuItemPadding - menu.menuItemIndent;
l.hiliteShim.style.width = l.hiliteShim.style.pixelWidth;
l.textShim.style.pixelWidth = menu.menuItemWidth - 2*menu.menuItemPadding - menu.menuItemIndent;
l.textShim.style.width = l.textShim.style.pixelWidth;
}
} else {
l.style.pixelWidth = menu.menuItemWidth;
l.style.pixelHeight = menu.menuItemHeight;
l.style.pixelTop = top;
l.style.pixelLeft = left;
if( menu.menuItemHAlign != 'left' ) {
var shim = FIND("menuItemShim" + menuCount);
shim[0].style.pixelWidth = menu.menuItemWidth - 2*menu.menuItemPadding - menu.menuItemIndent;
shim[1].style.pixelWidth = menu.menuItemWidth - 2*menu.menuItemPadding - menu.menuItemIndent;
shim[0].style.width = shim[0].style.pixelWidth + 'px';
shim[1].style.width = shim[1].style.pixelWidth + 'px';
}
}
if( menu.vertical ) top = top + menu.menuItemHeight+menu.menuItemBorder+menu.menuItemSpacing;
else left = left + menu.menuItemWidth+menu.menuItemBorder+menu.menuItemSpacing;
l.style.fontSize = menu.fontSize + 'px';
l.style.backgroundColor = menu.menuItemBgColor;
l.style.visibility = "inherit";
l.saveColor = menu.menuItemBgColor;
l.menuHiliteBgColor = menu.menuHiliteBgColor;
l.mmaction = container.menus[x].actions[i];
l.hilite = FIND("menuItemHilite" + menuCount);
l.focusItem = FIND("focusItem" + x);
l.focusItem.style.pixelTop = -30;
l.focusItem.style.top = '-30px';
var childItem = FIND("childMenu" + menuCount);
if (childItem) {
l.childMenu = container.menus[x].items[i].menuLayer;
childItem.style.pixelLeft = menu.menuItemWidth -11;
childItem.style.left = childItem.style.pixelLeft + 'px';
childItem.style.pixelTop = (menu.menuItemHeight /2) -4;
childItem.style.top = childItem.style.pixelTop + 'px';
l.Menu.childMenus[l.Menu.childMenus.length] = l.childMenu;
}
l.style.cursor = "hand";
menuCount++;
}
if( menu.vertical ) {
menu.menuHeight = top-1-menu.menuItemSpacing;
menu.menuWidth = menu.menuItemWidth;
} else {
menu.menuHeight = menu.menuItemHeight;
menu.menuWidth = left-1-menu.menuItemSpacing;
}
var lite = FIND("menuLite" + x);
var s = lite.style;
s.pixelHeight = menu.menuHeight +(menu.menuBorder * 2);
s.height = s.pixelHeight + 'px';
s.pixelWidth = menu.menuWidth + (menu.menuBorder * 2);
s.width = s.pixelWidth + 'px';
if( menu.menuBgOpaque ) s.backgroundColor = menu.menuLiteBgColor;
var body = FIND("menuFg" + x);
s = body.style;
s.pixelHeight = menu.menuHeight + menu.menuBorder;
s.height = s.pixelHeight + 'px';
s.pixelWidth = menu.menuWidth + menu.menuBorder;
s.width = s.pixelWidth + 'px';
if( menu.menuBgOpaque ) s.backgroundColor = menu.bgColor;
s = menuLayer.style;
s.pixelWidth = menu.menuWidth + (menu.menuBorder * 4);
s.width = s.pixelWidth + 'px';
s.pixelHeight = menu.menuHeight+(menu.menuBorder*4);
s.height = s.pixelHeight + 'px';
}
}
if (document.captureEvents) document.captureEvents(Event.MOUSEUP);
if (document.addEventListener) document.addEventListener("mouseup", onMenuItemOver, false);
if (document.layers && window.innerWidth) {
window.onresize = NS4resize;
window.NS4sIW = window.innerWidth;
window.NS4sIH = window.innerHeight;
setTimeout("NS4resize()",500);
}
document. = mouseupMenu;
window.mmWroteMenu = true;
status = "";
}