用Div做的网页菜单被客户端控件挡住
解决问题:由于层与控件之间的优先级是:控件 > 层,因此在显示的时候,会因为优先级的次序而会出现如上问题。(如果几个元素都是层的话,我们可以通过层的 z-index 属性来设置)解决办法就是:给层中放一个优先级比控件更高的元素(iframe),从而解决此问题!具体解决代码如下:
?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">?
<html>?
<head>?
<title> New Document </title>?
<meta name="Generator" content="EditPlus">?
<meta name="Author" content="">?
<meta name="Keywords" content="">?
<meta name="Description" content="">?
</head>
<body>
<a href="#" onmouseover="document.getElementById('menu').style.visibility='visible'" onmouseout="document.getElementById('menu').style.visibility='hidden'" title="这个菜单展示了如何制作能够浮在SOAOffice客户端控件之上的div菜单">div菜单导航栏</a>
<div id="menu" style="position:absolute; visibility:hidden; top:33px; left:10px; width:150px; height:200px; background-color:#6699cc;" onmouseover="document.getElementById('menu').style.visibility='visible'" onmouseout="document.getElementById('menu').style.visibility='hidden'">
?? <table>
?? <tr><td height="30px"><a href="http://www.kehansoft.com/soaoffice/doclist.asp">协同办公应用示例</a></td></tr>
?? <tr><td height="30px"><a href="http://www.kehansoft.com/soaexcel/login.asp">Excel销售订单示例</a></td></tr>
?? <tr><td height="30px"><a href="http://www.kehansoft.com/soaword/index.asp">Word数据填充示例</a></td></tr>
?? <tr><td height="30px"><a href="http://www.kehansoft.com/soapdf/pdflist.asp">PDF在线阅读示例</a></td></tr>
?? <tr><td height="30px"><a href="http://www.kehansoft.com/knowledge/doclist.asp">文档在线安全浏览</a></td></tr>
?? </table>
?? <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:150px; height:200px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
</div>
<OBJECT id="SOAOfficeCtrl" codeBase="SOAOffice.ocx#version=7,1,1,0" height="100%" width="100%" classid="clsid:FABFB7B0-B15E-413C-94BC-96D21EC78712" data="" VIEWASTEXT>
<div align=center STYLE="color:red;">本机尚未安装SOAOFFICE客户端控件,请安装浏览器上方黄色提示条或弹出提示框中的SOAOFFICE客户端控件。</div>
</OBJECT>
</body>?
</html>
用以上代码新建一个menu.htm,在浏览器里访问,你会看到很好的运行效果。
以上html都是做Div菜单的通常代码,其中添加的关键语句是
<iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:150px; height:200px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
将这句代码结合到你的代码里即可解决问题。