[Java] 如何实现跨框架的下拉菜单

hakey

      使用frame或者iframe后，我的子菜单无法跨出框架。
      你可以把鼠标移动到黑马论坛的“视频下载” 上，它就蹦出了框架了，这样的效果如何实现？
      如能解决，15黑马币奉上

hakey · hakey

1、frame不能脱离frameSet单独使用，iframe可以；

2、frame不能放在body中；如下可以正常显示：

<frameset rows="50%,*">
<frame name="frame1" src="test1.htm"/>
<frame name="frame2" src="test2.htm"/>
</frameset>


如下不能正常显示：
<body>
<frameset rows="50%,*">
<frame name="frame1" src="test1.htm"/>
<frame name="frame2" src="test2.htm"/>
</frameset>
<body>

3、嵌套在frameSet中的iframe必需放在body中；如下可以正常显示：
  <body>
<frameset>
   <iframe name="frame1" src="test1.htm"/>
   <iframe name="frame2" src="test2.htm"/>
</frameset>
  </body>
如下不能正常显示：

  
<frameset>
   <iframe name="frame1" src="test1.htm"/>
   <iframe name="frame2" src="test2.htm"/>
</frameset>
  

4、不嵌套在frameSet中的iframe可以随意使用；
   如下均可以正常显示：
<body>
<iframe name="frame1" src="test1.htm"/>
<iframe name="frame2" src="test2.htm"/>
</body>


<iframe name="frame1" src="test1.htm"/>
<iframe name="frame2" src="test2.htm"/>

5、如果在同一个页面使用了两个以上的iframe，在IE中可以正常显示，在firefox中只能显示出第一个；使用两个以上的frame在IE和firefox中均可正常

希望可以帮到你。

风之旅人 · 风之旅人

类似于这样

纪青超 · 纪青超

这是用什么技术进行实现的啊，跳出框架不太明啊。

风之旅人 · 风之旅人

纪青超发表于 2015-6-21 15:24
这是用什么技术进行实现的啊，跳出框架不太明啊。

html css javaScript jquery
能实现就成

纪青超 · 纪青超

这是用什么技术进行实现的啊，跳出框架不太明啊。

逝....曾经 · 逝....曾经

我在网上百度的，你看对你有帮助没

逝....曾经 · 逝....曾经

我在网上百度的，你看对你有帮助没 http://www.cnblogs.com/lxfgood/archive/2011/03/28/1997501.html

Coolman · Coolman

onmouseover="showMenu({'ctrlid':this.id,'ctrlclass':'hover','duration':2})" // 这是“视频下载”的源码
当鼠标移动到上面时，设置菜单的显示事件

lucien_he · lucien_he

瞅瞅前台，啊

Diors · Diors

你要找的JS的鼠标事件onMouseOver么？

αメ炫 · αメ炫

都不知道你在说什么，首先frameset框架集已经从html标准中淘汰了，应该避免使用frameset\frame，iframe可以使用，但也尽量减少使用，操作iframe的代码也存在兼容性问题，通常用在富文本编辑器、上传控件等。
至于你说的鼠标移动到菜单上会出现下拉菜单，这些都是div ul li 结构就能实现也根本不需要iframe，要说实现的话，可以事先把菜单准备好放在下面，当鼠标移到上面hover之后把它显示出来就行了，离开在display:none

pacio · pacio

这个用html+css+js实现很简单啊
<head>
<style>
.nav{background-color:#333; width:80px; height:40px; position:relative;}
.nav a{line-height:40px; color:#FFF; text-align:center; display:block;}
.ulist{ list-style:none; position:absolute; left:-32px; top:32px; display:none;}
.ulist li{ width:80px; height:32px; line-height:32px; text-align:center; font-size:12px;}
.ulist li a{background-color:#F60; display:block;}
.ulist li a:hover{ background-color:#F90;}
</style>
</head>

<body>
<div class="nav">
<a>视频下载</a>
</div>
<ul class="ulist">
<li><a>java视频下载</a></li>
<li><a>php视频下载</a></li>
<li><a>ios视频下载</a></li>
</ul>

</body>
</html>
<script>

var oDiv = document.getElementsByTagName('div')[0];
var oUl = document.getElementsByTagName('ul')[0];

   oDiv.onclick = function(){


   if(oUl.style.display = 'none'){
   oUl.style.display = 'block';
   }else{
   oUl.style.display = 'none';
   }

   }

</script>

norwood · norwood

和我qq头像一样呢，樱木花道:loveliness:

帐号		自动登录	找回密码
密码			加入黑马

[Java] 如何实现跨框架的下拉菜单

最佳答案

点评

14 个回复