模拟office菜单

<style type="text/css">
* { font-size: 12px; }
body { margin: 0px; }
</style>

<script language="JavaScript">
// Office XP 菜单

var sub_display = false;

// 颜色数组说明：此数组储存菜单各部份颜色样式，可以改变颜色值达到改变样式的效果
// 值依次为：高亮背景色, 高亮边框色, 菜单栏背景色, 子菜单背景色, 子菜单边框色, 子菜单标题色, 子菜单阴影色

var color = [@##B6BDD2@#, @##0A246A@#, @##D4D0C8@#, @##F8F8F8@#, @##666666@#, @##DBD8D1@#, @##DDDDDD@#];

// 菜单数组说明：此数组储存各菜单数据
// 值依次为：
// 1. 主菜单名称, 下拉菜单右延空白长度
// 2. 第1个子菜单名称, 链接地址
// 3. 第2个子菜单名称, 链接地址
// 4. ......

var menu = new Array();
menu[0] = [[@#菜单一@#, 50], [@#1111@#, @#1.htm@#], [@#2222@#, @#2.htm@#], [@#3333@#, @#3.htm@#]];
menu[1] = [[@#菜单二@#, 50], [@#1111@#, @#1.htm@#], [@#2222@#, @#2.htm@#], [@#3333@#, @#3.htm@#]];
menu[2] = [[@#菜单三@#, 50], [@#1111@#, @#1.htm@#], [@#2222@#, @#2.htm@#], [@#3333@#, @#3.htm@#]];
menu[3] = [[@#菜单四@#, 50], [@#1111@#, @#1.htm@#], [@#2222@#, @#2.htm@#], [@#3333@#, @#3.htm@#]];
menu[4] = [[@#菜单五@#, 50], [@#1111@#, @#1.htm@#], [@#2222@#, @#2.htm@#], [@#3333@#, @#3.htm@#]];
menu[5] = [[@#菜单六@#, 50], [@#1111@#, @#1.htm@#], [@#2222@#, @#2.htm@#], [@#3333@#, @#3.htm@#]];


document.write(@#<table width="100%" cellspacing="0" cellpadding="0" style="background-color: @# + color[2] + @#; border-left: 1px #F4F4F4 solid; border-top: 1px #F4F4F4 solid; border-right: 1px #999999 solid; border-bottom: 1px #999999 solid;" onSelectStart="return false;" onContextMenu="return false;"><tr><td width="5"><img width="5" height="1"></td><td><table cellspacing="0" cellpadding="2"><tr>@#);
for (var i=0; i<menu.length; i++)
document.write(@#<td style="border: 1px @# + color[2] + @# solid; cursor: default;" onClick="Menu_Click(this, @# + i + @#)" onMouseOver="Menu_Over(this, @# + i + @#)" onMouseOut="Menu_Out(this, @# + i + @#)"><nobr><img width="10" height="1">@# + menu[i][0][0] + @#<img width="10" height="1"></nobr></td>@#);
document.write(@#</td></tr></table></tr></table>@#);

for (var i=0; i<menu.length; i++) {
document.write(@#<table id="subMenu" cellspacing="0" cellpadding="0" onSelectStart="return false;" onContextMenu="return false;" style="position: absolute; display: none; top: 1px; border-left: 1px @# + color[4] + @# solid; border-bottom: 1px @# + color[4] + @# solid; cursor: default; filter:progid:dximagetransform.microsoft.dropshadow(color=@# + color[6] + @#,offx=3,offy=3,positive=true)"><tr><td style="border-top: 1px @# + color[4] + @# solid; border-right: 1px @# + color[4] + @# solid; background-color: @# + color[5] + @#;" onClick="subMenu_Hide(false)"><nobr><img width="1" height="2"><br><img width="12" height="1">@# + menu[i][0][0] + @#<img width="12" height="1"><br><img width="1" height="3"></nobr></td><td style="border-bottom: 1px @# + color[4] + @# solid;" onMouseOver="subMenu_Hide(true)"><img width="@# + menu[i][0][1] + @#" height="1"></td></tr><tr><td colspan="2" style="border-right: 1px @# + color[4] + @# solid; background-color: @# + color[3] + @#;"><table width="100%" cellspacing="1" cellpadding="2" style=" background-color: @# + color[3] + @#">@#);
for (var j=1; j<menu[i].length; j++)
document.write(@#<tr><td style="border: 1px @# + color[3] + @# solid;" onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)" onClick="location.href=\@#@# + menu[i][j][1] + @#\@#"><nobr>&nbsp;@# + menu[i][j][0] + @#</nobr></td></tr>@#);
document.write(@#</td></tr></table></td></tr></table>@#);
}

function Menu_Over(obj, s) {
if (sub_display) {
subMenu_Show(obj, s)
}
else {
obj.style.backgroundColor = color[0];
obj.style.border = @#1px @# + color[1] + @# solid@#;
}
}

function Menu_Out(obj) {
obj.style.backgroundColor = @#@#;
obj.style.border = @#1px @# + color[2] + @# solid@#;
}

function Menu_Click(obj, s) {
subMenu_Show(obj, s)
}

function subMenu_Over(obj) {
obj.style.backgroundColor = color[0];
obj.style.border = @#1px @# + color[1] + @# solid@#;
}

function subMenu_Out(obj) {
obj.style.backgroundColor = @#@#;
obj.style.border = @#1px @# + color[3] + @# solid@#;
}

function subMenu_Hide(hide) {
for (var i=0; i<subMenu.length; i++)
subMenu[i].style.display = @#none@#;
sub_display = hide;
}

function subMenu_Show(obj, s) {
subMenu_Hide(false);
subMenu(s).style.posLeft = obj.offsetLeft + 6;
subMenu(s).style.display = @#@#;
sub_display = true;
}

window.onfocus = subMenu_Hide;
</script>

原文转自：http://www.ltesting.net