用框架了,想在左侧的框架里做个菜单,但做出来发现弹出的菜单被框架挡住了……
不过现在好了,用下面这种方法菜单就不会受到框架的影响了,呵呵
首先,建立一个框架集
<
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 >
< 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 >
< 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 >
这样的菜单就不会被框架挡住喽~~~