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

  
  

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