模拟office菜单-ASP教程,客户端相关

<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>