|
本文将实现windows系统菜单形式,实现的方法有很多种：一是采用,ajax实现,二是采用js+div实现,出于对于功能菜单一般都是不是很变动的数据,据于决定采用,js+div实现此功能.
功能要点:
1.取出页面上一个对像的X,Y位置,用于把DIV显示在此处
2.利用DIV的属性显示或隐藏DIV
以下为详细代码,可直接运行.
<html>
<head><title></title>
</head>
<body>
<script language="javascript">
<!--
/**
* 取得X坐标
*/
function getXPosition(id){
var e=document.getElementById(id);
var x=e.offsetLeft;
while(e=e.offsetParent){
x+=e.offsetLeft;
}
return x;
}
/**
* 取得Y坐标
*/
function getYPosition(id){
var e=document.getElementById(id);
var y=e.offsetTop;
while(e=e.offsetParent){
y+=e.offsetTop;
}
return y;
}
/**
* 显示DIV功能菜单
*/
var showMenuId=0;
function popUp(xyId,menuId) {
var x = getXPosition(xyId);
var y = getYPosition(xyId)+20;
newX = x;// document.getElementById(menu).style.left;//window.event.clientX;
newY = y;//document.getElementById(menu).style.top;//event.clientY;
menu = document.getElementById(menuId);
menu.style.visibility = "visible"
menu.style.top = newY;
menu.style.left = newX ;
if(showMenuId!="0" && showMenuId!=menuId){
popClose(showMenuId);
}
showMenuId=menuId;
}
/**
* 关闭DIV功能菜单
*/
function popClose(menuId){
menu = document.getElementById(menuId);
menu.style.visibility = "hidden"
}
-->
</script>
<table border=1>
<tr>
<td>
<div id="xy1" onclick="popUp('xy1','menu1')" style="height:35px;border:#000000 solid 0px"><a href="####">内容管理</a>
</div>
</td>
<td>
<div id="xy2" onclick="popUp('xy2','menu2')" style="height:35px;border:#000000 solid 0px"><a href="####">系统管理</a>
</div>
</td>
</tr>
</table>
<!---menu difined--->
<div id='menu1' onmouseover="popUp('xy1','menu1')" onmouseout = "popClose('menu1')"style=" z-index:3;position:absolute;top:0;left:0;visibility:hidden;padding:3px;border:1px solid #528AC6;background-color:#FFFFFF" >
<center><b>IT知道网编程相关</b><center><br>
<center><b>.net专区</b><center><br>
</div>
<div id='menu2' onmouseover="popUp('xy2','menu2')" onmouseout = "popClose('menu2')" style=" z-index:3;position:absolute;top:0;left:0;visibility:hidden;padding:3px;border:1px solid #528AC6;background-color:#FFFFFF" >
<center><b>数据库</b><center><br>
<center><b>软件工程</b><center><br>
</div>
| 
