现在的位置: 首页 > 综合 > 正文

[Javascript] 可以跨框架的菜单

2017年10月14日 ⁄ 综合 ⁄ 共 2398字 ⁄ 字号 评论关闭

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

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

首先,建立一个框架集

<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, 
21084, link1); 
}
 
</script> 
</head> 
<body> 
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
 
<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>

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

抱歉!评论已关闭.