导航栏使用向下弹出层的例子 

<!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>
posted @ 2011-05-04 18:41  wccc  阅读(549)  评论(0)    收藏  举报