`
gregorychen
  • 浏览: 6727 次
  • 来自: ...
社区版块
存档分类
最新评论

用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>
将这句代码结合到你的代码里即可解决问题。

分享到：
| w3c标准控件的height100%不起作用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics