📄 7-3.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>多级菜单</title>
<META http-equiv="content-type" CONTENT="text/html;charset=gb2312">
<META NAME="Author" CONTENT="CZH;czh44@sohu.com">
</head>
<style >
body {font-size:9pt;font-family:'宋体'}
table {font-size:9pt;font-family:'宋体'}
td.con {border-left:1px solid gray;width:120px;height:21px}
a.m{text-decoration:none;visited:none}
.menu{background: #eeeeee;position:absolute;visibility:hidden;z-index:3;line-height:18px;width:90px}
.mainmenu{position:absolute;top:35px}
</style>
<script language="JavaScript">
/*--------------------------------\
| Authored by CZH;czh44@sohu.com |
\--------------------------------*/
var theShowLayIndex=0;
var mouseLayer; //当前鼠标所在层
var rowHeight = 18; //层中第一行行高
var delay = 1200; //延时关闭时间,单位毫秒
var ifHide; //决定鼠标移动时层的隐藏
function showSubMenu(parentLayer,subLayer,rows,xPos,ifmain)
{
/*------------------------------------------------------------
| parentLayer为当前菜单所在的层
| subLayer为当前菜单的子菜单层
| rows为当前菜单在层中的行位置,0表示位于第1行,用来确定子菜单纵向坐标
| xPos确定子菜单水平位置,取值0表示与父菜单水平位置相同，取值1表示显示在父菜单右侧
| ifmain表示当前菜单是否是主菜单
-------------------------------------------------------------*/
mouseLayer = parentLayer;
//先关闭该级下所子菜单
ifHide = false;
var menuLayers = document.getElementsByTagName("DIV");
if(ifmain)
{
hideAll();
}
else
{
for (i=0; i<menuLayers.length; i++)
{
if((menuLayers[i].id.indexOf(parentLayer) != -1) && (menuLayers[i].id != parentLayer))
{
document.getElementById(menuLayers[i].id).style.visibility = "hidden";
}
}
}
//展开子菜单
if(subLayer)
{ //确定子菜单位置，其中减5使菜单向上向左和父菜单有部分重合
document.getElementById(subLayer).style.top = parseInt(document.getElementById(parentLayer).style.top) + rows * rowHeight-1;
document.getElementById(subLayer).style.left = parseInt(document.getElementById(parentLayer).style.left) + xPos * document.getElementById(parentLayer).clientWidth - 5;
document.getElementById(subLayer).style.visibility = "visible";
}
}
function hideMenu(oldMouseLayer)
{
//如果不在子菜单中，则关闭所有菜单
if(oldMouseLayer)
{
ifHide = true;
//延时1秒后再执行hideMenu进行检查，决定是否关闭
window.setTimeout("hideMenu()",delay);
}
else //延时以后
{
if(ifHide == true)
hideAll();
}
}
function hideAll()
{ //关闭主菜单以外的所有菜单
var menuLayers = document.getElementsByTagName("DIV");
for (i=0; i<menuLayers.length; i++)
{
if(menuLayers[i].id != "menuOne" && menuLayers[i].id != "menuTwo" && menuLayers[i].id != "menuThree" && menuLayers[i].id != "menuFour")
{
document.getElementById(menuLayers[i].id).style.visibility = "hidden";
}
}
}
</script>
<body>
<br>
<table width=100% id="theMenu" cellspacing="0" cellpadding="0" bgcolor="#BEC8F0" style="border-bottom:1px solid silver">
<tr>
<td width="100px"> </td>
<td class="con" id="td1">
<div id="menuOne" style="position:absolute;top:35px;left:120px;width:90px" onMouseOver="showSubMenu('menuOne','menuOneSub01',1,0,1)" onMouseOut="hideMenu(this.id)">
<a href="" class=m>主菜单一</a>
</div>
</td>
<td class="con" id="td2">
<div id="menuTwo" style="position:absolute;top:35px;left:240px;width:90px" onMouseOver="showSubMenu('menuTwo','menuTwoSub01',1,0,1)" onMouseOut="hideMenu(this.id)">
<a href="" class=m>主菜单二</a>
</div>
</td>
<td class="con" id="td3">
<div id="menuThree" style="position:absolute;top:35px;left:360px;width:90px" onMouseOver="showSubMenu('menuThree','menuThreeSub01',1,0,1)" onMouseOut="hideMenu(this.id)">
<a href="" class=m>主菜单三</a>
</div>
</td>
<td class="con" id="td4">
<div id="menuFour" style="position:absolute;top:35px;left:480px;width:90px" onMouseOver="showSubMenu('menuFour','menuFourSub01',1,0,1)" onMouseOut="hideMenu(this.id)">
<a href="" class=m>主菜单四</a>
</td>
<td id="td5"> </td>
</tr>
</table>
<div id="menuOneSub01" class="menu" onMouseOut="hideMenu(this.id)">
<a href="xy01.html" onMouseOver="showSubMenu('menuOneSub01','menuOneSub0101',0,1)" >1菜单项一 >></a><br>
<a href="xy02.html" onMouseOver="showSubMenu('menuOneSub01')">1菜单项二</a><br>
</div>
<div id="menuOneSub0101" class="menu" onMouseOut="hideMenu(this.id)">
<a href="" onMouseOver="showSubMenu('menuOneSub0101')">1子菜单项01</a><br>
<a href="" onMouseOver="showSubMenu('menuOneSub0101')">1子菜单项01</a><br>
</div>
<div id="menuTwoSub01" class="menu" onMouseOut="hideMenu(this.id)">
<a href="xk01.html" onMouseOver="showSubMenu('menuTwoSub01')">2菜单项一</a><br>
<a href="xk02.html" onMouseOver="showSubMenu('menuTwoSub01')">2菜单项二</a><br>
<a href="xk03.html" onMouseOver="showSubMenu('menuTwoSub01')">2菜单项三</a><br>
<a href="xk04.html" onMouseOver="showSubMenu('menuTwoSub01')">2菜单项四</a><br>
</div>
<div id="menuThreeSub01" class="menu" onMouseOut="hideMenu(this.id)">
<a href="js01.html" onMouseOver="showSubMenu('menuThreeSub01')">3菜单项一</a><br>
<a href="js02.html" onMouseOver="showSubMenu('menuThreeSub01')">3菜单项二</a><br>
<a href="js03.html" onMouseOver="showSubMenu('menuThreeSub01')">3菜单项三</a><br>
<a href="js04.html" onMouseOver="showSubMenu('menuThreeSub01','menuThreeSub0101',3,1)">3菜单项四 >></a><br>
</div>
<div id="menuThreeSub0101" class="menu" onMouseOut="hideMenu(this.id)">
<a href="js01.html" onMouseOver="showSubMenu('menuThreeSub0101')">3子菜单项01</a><br>
<a href="js02.html" onMouseOver="showSubMenu('menuThreeSub0101')">3子菜单项01</a><br>
<a href="js03.html" onMouseOver="showSubMenu('menuThreeSub0101','menuThreeSub010101',2,1)">3子菜单项01 >></a><br>
</div>
<div id="menuThreeSub010101" class="menu" onMouseOut="hideMenu(this.id)">
<a href="js01.html" onMouseOver="showSubMenu('menuThreeSub010101')">3子菜单项0101</a><br>
<a href="js02.html" onMouseOver="showSubMenu('menuThreeSub010101')">3子菜单项0101</a><br>
<a href="js03.html" onMouseOver="showSubMenu('menuThreeSub010101')">3子菜单项0101</a><br>
</div>
<div id="menuFourSub01" class="menu" onMouseOut="hideMenu(this.id)">
<a href="xs01.html" onMouseOver="showSubMenu('menuFourSub01')">4菜单项一</a><br>
<a href="xs02.html" onMouseOver="showSubMenu('menuFourSub01')">4菜单项二</a><br>
<a href="xs03.html" onMouseOver="showSubMenu('menuFourSub01')">4菜单项三</a><br>
<a href="xs04.html" onMouseOver="showSubMenu('menuFourSub01')">4菜单项四</a><br>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -