[Javascript] 可以跨框架的菜单

用框架了，想在左侧的框架里做个菜单，但做出来发现弹出的菜单被框架挡住了……

不过现在好了，用下面这种方法菜单就不会受到框架的影响了，呵呵

首先，建立一个框架集

< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > 无标题文档 </ title >
</ head >

< frameset  cols ="80,*"  frameborder ="NO"  border ="0"  framespacing ="0" >
   < frame  src ="FrameLeft.aspx"  name ="leftFrame"  scrolling ="NO"  noresize >
   < frame  src ="FrameMain.aspx"  name ="mainFrame" >
</ frameset >

< noframes >
< body >
</ body ></ noframes >
</ html >

建立左侧菜单页FrameLeft.aspx

<! 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 > 跨菜单的示例 </ title >  
< script  type ="text/javascript" > ...  
var oPopup = window.createPopup(); 
function richContext() 
...{ 
    var lefter2 = event.offsetY+0; 
    var topper2 = event.offsetX+15; 
    oPopup.document.body.innerHTML = divPM.innerHTML;  
    oPopup.show(topper2, lefter2, 210, 84, link1); 
} 
</ script >  
</ head >  
< body >  
< table  border ="0"  cellpadding ="0"  cellspacing ="0" >
< tr >
< td >
  < a  id ="link1"  href ="#"  class ="c"  onclick ="richContext(); return false;"  onmouseover ="richContext(); return false;" > 一级菜单 </ a >
  < div  id ="divPM"  style ="display:none;" >
     < div  style ="position:relative; top:0; left:0; border:2px solid #FF9900;  border-top:2px solid #FF9900; border-left:2px solid #FF9900; background:#FF9900; height:40px; width:210px;" >   
       < div  style ="position:relative; top:0; left:0; background:#FFFF99; border:1px solid #FF9900; height:18px; color:black; font-family:宋体; padding:2px; padding-left:10px; font-size:12px; cursor:hand"  onmouseover ="this.style.background='#FF9900'; this.style.color='#ffffff'; this.style.border='1px solid #ffffff';"  onmouseout ="this.style.background='#FFFF99'; this.style.color='#000000'; this.style.border='1px solid #FF9900';"  onclick ="window.parent.oPopup.hide(); " >   
        一级菜单之子菜单1 </ div >
       < div  style ="position:relative; top:0; left:0; background:#FFFF99; border:1px solid #FF9900; height:18px; color:black; font-family:宋体; padding:2px; padding-left:10px; font-size:12px; cursor:hand"  onmouseover ="this.style.background='#FF9900'; this.style.color='#ffffff'; this.style.border='1px solid #ffffff';"  onmouseout ="this.style.background='#FFFF99'; this.style.color='#000000'; this.style.border='1px solid #FF9900'; "  onclick ="window.parent.oPopup.hide();" >
        一级菜单之子菜单2 </ div >
     </ div >  
  </ div >
</ td >
</ tr >
</ table >
</ body >  
</ html >

这样的菜单就不会被框架挡住喽~~~