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

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

分享到:
评论

相关推荐

    值得推荐的几个客户端控件源码例子

    客户端控件是Web开发中的重要组成部分,它们极大地增强了网页的交互性和用户体验。在这个"值得推荐的几个客户端控件源码例子"中,我们主要关注四个关键控件:ListBox、Panel、ContextMenu和Expand。这些控件均是使用...

    js日历DIV控件

    JavaScript(简称JS)是一种广泛使用的客户端脚本语言,主要应用于网页和浏览器,负责动态化和增强网页的交互性。JS代码可以直接嵌入HTML文档中,也可以通过外部JS文件引入。在本案例中,`Calender_v_1_3.js`文件...

    div+css菜单

    在创建菜单时,我们通常会用&lt;div&gt;作为容器,再通过CSS设置背景色、边框、字体样式等属性,以创建各种效果的菜单项。 二、优点 1. 语义化:使用&lt;div&gt;元素可以提高HTML代码的可读性和可维护性。 2. 响应式:通过CSS...

    div模拟下拉菜单(select)jquery插件.gz

    为了解决这个问题,开发者常常使用`div`元素配合CSS和JavaScript来模拟下拉菜单,以实现更加灵活和美观的效果。在这个"div模拟下拉菜单(select)jquery插件.gz"压缩包中,包含的就是这样一个基于`div`和jQuery的...

    使用div实现的复选选择控件

    总结,使用`div`和jQuery实现的复选选择控件是一种优雅的方式来处理多选数据输入,它提供了更好的用户体验和更大的定制空间。通过理解和实践这样的控件,开发者可以提升网页应用的交互性和易用性。

    用div+css写个日历控件

    现在用div+css写日历控件,可以用div的一个特性,就是当它排不下的时候,就自动换行,那还用得着拼么?因此效率大大增加,一个简单的日历控件,十分钟搞定!大家可以下载看看,测试一下,如果有问题及时提出。这个...

    使用div实现的单选选择控件

    在div实现的单选控件中,每个div模拟了单选按钮的行为,但视觉上不直接显示单选按钮,而是用文本或者其他图形元素表示选项。 jQuery在这里起到了关键的作用。它是一个强大的JavaScript库,提供了丰富的DOM操作、...

    div css导航菜单用CSS样式表处理斜角导航条

    在构建导航菜单时,`&lt;div&gt;`通常被用作容器,包裹整个导航条或者每个单独的导航项。 要创建斜角导航条,我们需要利用CSS的边框属性(border)以及边框颜色(border-color)、边框宽度(border-width)和边框样式...

    Accordion 菜单折叠效果控件

    Accordion 菜单折叠效果控件是一种常见的网页交互设计元素,尤其在内容丰富的网站和应用中,它能够有效地节省空间并提升用户体验。该控件基于AJAX(Asynchronous JavaScript and XML)技术,允许页面的部分内容在...

    经典网页菜单(源代码)

    本资源名为“经典网页菜单(源代码)”,其核心在于使用CSS和HTML结合,特别是利用了div元素来构建菜单。这里我们将深入探讨这些知识点。 首先,HTML(超文本标记语言)是网页内容的基础结构框架,而CSS(层叠样式表...

    网页设计,网页控件,div

    在这个主题中,我们将深入探讨网页控件,特别是div元素,以及如何在没有JavaScript的情况下构建一个学校网站。 HTML是网页设计的基础,用于定义页面结构。它通过不同的标签来组织内容,如段落(`&lt;p&gt;`)、标题(`...

    div+css菜单制作

    【div+css菜单制作】是网页设计中常见的一种技术,用于创建美观且功能丰富的导航菜单。这个教程将详细讲解如何使用HTML和CSS构建一个多级下拉菜单。 首先,我们从【部分内容】中可以看到,HTML代码是构建菜单的基础...

    值得推荐4款DIV+CSS网页首页导航条菜单(绝对漂亮)例子

    本文将深入探讨四款基于DIV+CSS构建的网页首页导航条菜单,这些菜单设计精美,能有效提升用户体验。我们首先来了解什么是DIV和CSS,以及它们在网页设计中的作用。 DIV,全称为“Division”,是HTML语言中的一个标签...

    经典OA系统左侧DIV+CSS菜单

    在这款经典OA系统中,左侧的菜单就是用DIV元素构建的,配合CSS样式,实现了美观且响应式的导航结构。 协同办公系统中的菜单设计是关键,因为它需要提供清晰的路径,帮助用户快速找到所需功能。该菜单可能包括了工作...

    级联菜单用div实现

    级联菜单,也被称为下拉菜单,是一种常见的用户界面元素,尤其在网页设计中广泛使用。它通过在主菜单项下展示子菜单,为用户提供了一种高效、节省空间的方式来导航复杂的菜单结构。在这个主题中,我们将探讨如何使用...

    淘宝菜单,div+css菜单

    在构建菜单时,`div`可以被用来创建菜单容器,每个菜单项也可以由`div`元素来表示,这样可以使菜单结构清晰,便于管理和定位。通过设置`div`的宽度、高度、边距和内边距,我们可以控制菜单的整体布局和各个菜单项的...

    一款漂亮实用的OA系统左侧DIV+CSS菜单

    例如,可以使用JavaScript来实现菜单的展开和折叠动画,通过`addEventListener`监听用户的点击事件,然后用`toggle`方法控制菜单状态。此外,JavaScript还可以处理动态加载内容,如当用户点击某个菜单项时,动态加载...

    js使用div模拟拖动窗口控件

    在JavaScript的世界里,模拟拖动窗口控件是一种常见的交互设计,它可以给网页应用带来桌面应用般的用户体验。这个项目通过结合JavaScript(简称js)和XSLT(可扩展样式表语言转换)技术,实现了一个用div元素模拟的...

    DIV模仿下拉菜单

    在网页设计中,"DIV模仿下拉菜单"是一种常见的交互元素,它利用HTML的`&lt;div&gt;`元素和JavaScript(通常配合jQuery库)来模拟传统的HTML`&lt;select&gt;`下拉菜单的功能,同时提供更加灵活的样式控制和用户体验。下面将详细...

    Divelements(SL内嵌Html页面控件)

    同时,由于Silverlight本身具备的跨平台特性,使用Divelements工具开发的应用在不同操作系统和浏览器上的表现都能得到良好的保障。 总结来说,Divelements SilverlightTools是Silverlight开发者的重要利器,它使得...

Global site tag (gtag.js) - Google Analytics