导航菜单重叠框架
[英]Navigation Menu To Overlap Frames
问题描述
I am going through the process of revamping a very old website that used frames. 
我正在修改一个使用框架的旧网站。 I have started with the navigation menu, adopting the functionality of a jQuery drop down. 我已经开始使用导航菜单，采用jQuery下拉功能。
Although the menu successfully drops down on the homepage, when i have i navigate to another, the drop down menu's fail to overlap into the new frame. 虽然菜单在主页上成功下降，但当我导航到另一个菜单时，下拉菜单无法重叠到新框架中。 I can see a part of the drop down, however it is going 'behind' the new frame. 我可以看到下拉的一部分，但它会在新框架的“后面”。
FrameStructure.html: FrameStructure.html：
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en-gb">
<title>Product Menu</title>
</head>
<frameset rows="170px,*" border="0">
<frame id="PageHeader" name="PageHeader" src="PageHeader.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" title="Page Header" noresize>
<frameset id="PageFrames" name="PageFrames" cols="250px,*">
<frame id="PageNavigation" name="PageNavigation" src="Nav.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" title="Page Navigation" noresize>
<frameset id="ContentFrames" name="ContentFrames" rows="*,0">
<frame id="PageContent" name="PageContent" src="Blank.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0" title="Input Page" noresize>
<frame id="PageHelp" name="PageHelp" style="BORDER-TOP: white 2px solid;" src="Help.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0" title="Help Page">
</frameset>
</frameset>
<noframes>Your browser does not support frames</noframes>
</frameset>
</html>
PageHeader.html PageHeader.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<script src="javascript/modernizr-2.6.2.min.js"></script>
<title>Page Header</title>
<link type="text/css" href="css/redesign-main.css" rel="stylesheet">
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.10.1.custom.min.js"></script>
<!-- JavaScript Functionality to create drop down menu -->
<script type="text/javascript">
$(document).ready(function() {
$('nav li ul').hide().removeClass('fallback');
$('nav li').hover(
function () {
$('ul', this).stop().slideDown(300);
},
function () {
$('ul', this).stop().slideUp(300);
}
);
});
</script>
<style>
/*nav {background:#FFF;float:left;}*/
nav ul {
text-align:left;
}
nav ul li {
float:left;
display:inline;
border-right: 1px solid #083D72;
}
nav ul li:hover {
background:#2D8FF0;
}
nav ul li a {
display:block;
color:#444;
}
nav ul li ul {
position:absolute;
width:180px;
background:#09427C;
font-size: 12px;
}
nav ul li ul li {
width:180px;
}
nav ul li ul li a {
display:block;
color:#444;
}
nav ul li ul li:hover a {}
nav ul li ul.fallback {
display:none;
}
nav ul li:hover ul.fallback {
display:block;
}
</style>
</head>
<body onload="docOnLoad()">
<form id="frmPageHead" name="frmPageHead" action="">
<!-- BANNER START -->
<table id="banner" width="100%" border="0" cellspacing="0" cellpadding="0" style="">
<tr class="">
<div class="wrap">
<hgroup>
<h1 class="logo"><img src="images/logo.png" width="163" height="59"></h1>
<h2 class="site-heading">Welcome</h2>
</hgroup>
</div>
</tr>
</table>
<!-- BANNER END -->
<!-- START nav.site-nav -->
<nav class="site-nav">
<ul class="menu-nav wrap menu menu--hor">
<li class="menu-nav--home"><a href="javascript:parent.navigate(GetServerPath('NonSHTTP',getSeverDir()))" title="home"><span class="icon-home"></span></a></li>
<li class="data-sources"><a href="#" title="">Date Sources <span class="icon-caret-down"></span> </a>
<li>
<a href="c_frameset.html?overview.html">Information</a>
<ul class="fallback">
<li><a href="c_frameset.html?openaccount.html">New Customer</a></li>
<li><a href="c_frameset.html?existingaccount.html">Existing Customer</a></li>
<li><a href="c_frameset.html?pricing.html">Pricing</a></li>
<li><a href="c_frameset.html?testimonials.html">Testimonials</a></li>
<li><a href="c_frameset.html?servicesoverview.html">Our Services</a></li>
</ul>
</li>
<li>
<a href="c_frameset.html?addinfo.html">Additional Info</a>
<ul class="fallback">
<li><a href="c_frameset.html?terms.html">Terms & Conditions</a></li>
<li><a href="c_frameset.html?howto.html">How To's</a></li>
</ul>
</li>
<li>
<a href="c_frameset.html?contact.html">Contact Us</a>
<ul class="fallback">
<li><a href="c_frameset.html?cotactdetails.html">Contact Details</a></li>
<li><a href="c_frameset.html?feedback.html">Your Voice Matters</a></li>
<li><a href="c_frameset.html?environement.html">The Environment</a></li>
</ul>
</li>
<li>
<a href="c_frameset.html?ourproducts.html">Products</a>
<ul class="fallback">
<li><a href="c_frameset.html?noise.html">Sound Deadening</a></li>
<li><a href="c_frameset.html?wiring.html">Wiring</a></li>
<li><a href="c_frameset.html?connectors.html">Connections</a></li>
</ul>
</li>
<li>
<a href="#">Need Help?</a>
<ul class="fallback">
<li><a href="javascript:parent.PageHeader.openHelpWind(helpContext)">Need Help</a></li>
<li><a href="c_frameset.html?faqs.html">FAQ's</a></li>
<li><a href="c_frameset.html?getintouch.html">Contact Us</a></li>
</ul>
</li>
<li>
<a href="c_frameset.html?cookies.html">Cookies?</a>
</li>
</li>
</ul>
<!-- END menu-nav -->
</nav> <!-- END nav.site-nav -->
</form>
<form id="frmDuy" name="frmDuy" method="post" action="">
<input type="hidden" id="ONLINE_HELP" name="ONLINE_HELP" value=""/>
</form>
</body>
</html>
I've spent quite a lot of time trying to get this to work with little success so any information is highly appreciated. 我花了很多时间试图让这个工作没有成功，所以任何信息都受到高度赞赏。
Thanks. 谢谢。
Update: 更新：
Now attempting to use layout structure: 现在尝试使用布局结构：
<head>
<script> $(function({ $("#header").load("PageHeader.html"); }); </script>
</head>
<body>
<div id="header">
</div>
<div id="content">
<div id="pageNavigation">a
</div>
<div id="contentFrames">b
</div>
<div id="pageHelp">c
</div>
</div>
<div id="footer">
<h3>footer</h3>
</div>
</body>
</html>
I receive the following error: 我收到以下错误：
SyntaxError: missing : after property id SyntaxError：missing：属性id之后
$（function（{$（“＃header”）。load（“PageHeader.html”）;}）;
Which points to ("#header" 哪个指向（“#header”
Update: 更新：
Tried this: 试过这个：
<body> <div id="header"> <script> $(function({ $("#header").load("PageHeader.html"); }); </script> </div> <div id="content"> <div id="pageNavigation">a </div> <div id="contentFrames">b </div> <div id="pageHelp">c </div> </div> <div id="footer"> <h3>footer</h3> </div> </body>
Still receiving the following error: 仍然收到以下错误：
SyntaxError: missing : after property id SyntaxError：missing：属性id之后
$（function（{$（“＃header”）。load（“PageHeader.html”）;}）;
Which points to ("#header" 哪个指向（“#header”
1 个解决方案
解决方案1
2 2013-06-10 11:02:51
Here a solution in jquery: http://viewsboard.com/boards/view/discussion/2/550 这里是jquery的解决方案： http ： //viewsboard.com/boards/view/discussion/2/550
Here some example with code: http://deluxe-menu.com/cross-frame-mode-sample.html 这里有一些代码示例： http ： //deluxe-menu.com/cross-frame-mode-sample.html
Here a simple workaround: http://www.telerik.com/support/kb/aspnet-ajax/menu/can-radmenu-expand-over-other-frames-if-it-is-in-a-frame-itself.aspx 这里有一个简单的解决方法： http ： //www.telerik.com/support/kb/aspnet-ajax/menu/can-radmenu-expand-over-other-frames-if-it-is-in-a-frame-itself的.aspx
here another example: http://www.sothink.com/product/dhtmlmenu/store/crossframe/twomenus/ 这是另一个例子： http ： //www.sothink.com/product/dhtmlmenu/store/crossframe/twomenus/
here another one: http://www.zzzxo.com/q/answers-drop-down-menu-over-frames-14560398.html 这里还有一个： http ： //www.zzzxo.com/q/answers-drop-down-menu-over-frames-14560398.html
This problem seems old, old as frames, can I suggest you to eliminate frames? 这个问题看起来很古老，作为框架，我可以建议你消除帧吗？
Edit: Excluding the tables layout (it was abandoned years ago), you should consider that frame are deprecated in html5.. In your place I should start with some layout , or also just like this: 编辑：排除表格布局（它在几年前被废弃），您应该考虑在html5中不推荐使用该框架。在您的位置我应该从一些布局开始，或者像这样：
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="javascript/modernizr-2.6.2.min.js"></script>
<link type="text/css" href="css/redesign-main.css" rel="stylesheet">
<style>
div{
border-radius:20px; /*for border rounded*/
}
#header{
height:150px;
background-color:#FF0;
min-width:800px;
margin: 0 auto;
}
#pageNavigation{
min-height:450px;
margin: 0 auto;
width:20%;
background-color:#666;
float:left;
min-width:100px;
}
#contentFrames{
min-height:450px;
width:58%;
margin-left: 2px;
margin-right: 2px;
margin: 0 auto;
background-color:#03C;
float:left;
}
#pageHelp{
min-height:450px;
width:20%;
margin: 0 auto;
background-color:#3F0;
float:left;
min-width:100px;
}
#content{
margin: 0 auto;
width:90%;
min-width:720px;
}
#footer{
height:100px;
background-color:#FF0;
min-width:800px;
margin: 0 auto;
clear:both;
}
</style>
</head>
<body onload="docOnLoad()">
<div id="header">
<? //include('pageHeader.html'); ?>
<h1>header</h1>
</div>
<div id="content">
<div id="pageNavigation">a
</div>
<div id="contentFrames">b
</div>
<div id="pageHelp">c
</div>
</div>
<div id="footer">
<h3>footer</h3>
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.