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