[英]Navigation Menu To Overlap Frames
我正在修改一個使用框架的舊網站。 我已經開始使用導航菜單,采用jQuery下拉功能。
雖然菜單在主頁上成功下降,但當我導航到另一個菜單時,下拉菜單無法重疊到新框架中。 我可以看到下拉的一部分,但它會在新框架的“后面”。
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
<!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>
我花了很多時間試圖讓這個工作沒有成功,所以任何信息都受到高度贊賞。
謝謝。
更新:
現在嘗試使用布局結構:
<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>
我收到以下錯誤:
SyntaxError:missing:屬性id之后
$(function({$(“#header”)。load(“PageHeader.html”);});哪個指向(“#header”
更新:
試過這個:
<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>
仍然收到以下錯誤:
SyntaxError:missing:屬性id之后
$(function({$(“#header”)。load(“PageHeader.html”);});哪個指向(“#header”
這里是jquery的解決方案: http : //viewsboard.com/boards/view/discussion/2/550
這里有一些代碼示例: http : //deluxe-menu.com/cross-frame-mode-sample.html
這里有一個簡單的解決方法: 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.sothink.com/product/dhtmlmenu/store/crossframe/twomenus/
這里還有一個: http : //www.zzzxo.com/q/answers-drop-down-menu-over-frames-14560398.html
這個問題看起來很古老,作為框架,我可以建議你消除幀嗎?
編輯:排除表格布局(它在幾年前被廢棄),您應該考慮在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.