<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>类似下拉菜单的js效果</title>
<style type="text/css">
.flayer
{
width:300px;height:98px;border:#E4F5FD 1px solid;z-index:2;position:absolute;background:#FFFFFF;display:none;
}
div
{
float:left;}
</style>
<script type="text/javascript">
function CPos(x, y) {
this.x = x;
this.y = y;
}
function GetObjPos(ATarget) {
var target = ATarget;
var pos = new CPos(target.offsetLeft, target.offsetTop);
var target = target.offsetParent;
while (target) {
pos.x += target.offsetLeft;
pos.y += target.offsetTop;
target = target.offsetParent
}
return pos;
}
function showlayer(abc,fobj) {
var obj;
obj=document.getElementById(abc);
pos = GetObjPos(obj);
l = document.getElementById(fobj);
l.style.left = pos.x;
l.style.top = pos.y + obj.offsetHeight;
l.style.display = "block";
}
function closelayer(aa, bb) {
var x=document.getElementById(aa);
var y=document.getElementById(bb);
if(window.event.toElement.id != x && window.event.toElement.id != y)
document.getElementById(bb).style.display = "none";
}
</script>
</head>
<body>
<!--导航部分IE下可用 -->
<div>
<div id="f" style="background-color:Gray; float:left; height:35px; width:60px;" onmouseover='showlayer("f","thelayer")' onmouseout='closelayer("f","thelayer")'>菜单项1</div>
<div id="f1" style="background-color:Aqua; float:left; margin-left:0px; height:35px; width:60px;" onmouseover='showlayer("f1","thelayer1")' onmouseout='closelayer("f1","thelayer1")'>菜单项2
</div>
</div>
<!--正文内容-->
<div style="width:100%; height:500px; clear:none; float:left; background-color:Olive;">菜单下方内容</div>
<div>dsklhfkjshdkjgfhkjfshdlfkj</div>
<div>dsklhfkjshdkjgfhkjfshdlfkj</div>
<!--下拉层-->
<div id="thelayer" class="flayer" onmouseover='showlayer("f","thelayer")' onmouseout='closelayer("f","thelayer")' style=" background-color:Red; display:none;">下拉的层1</div>
<div id="thelayer1" class="flayer" onmouseover='showlayer("f1","thelayer1")' onmouseout='closelayer("f1","thelayer1")' style=" background-color:Red; display:none;">下拉的层2</div>
</body>
</html>
相关文章：