重叠帧的导航菜单答案

【问题标题】：Navigation Menu To Overlap Frames重叠帧的导航菜单
【发布时间】：2013-06-10 10:25:40
【问题描述】：

我正在修改一个使用框架的非常古老的网站。我从导航菜单开始，采用了 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 : after property 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 : after property id

$(function({ $("#header").load("PageHeader.html"); });

指向 ("#header"

【问题讨论】：

我建议从消除框架开始。稍后处理菜单。然后你必须同时解决框架的限制。
谢谢昆汀。我想在几年后移除框架，但现在我必须寻找解决方法。
将脚本放在dom加载页眉之后，否则找不到id
试试这个 **$(function(){ $("#header").load("/PageHeader.html", function(response, status, xhr) { if (status == " error") { var msg = "抱歉，出现错误："; alert(msg + xhr.status + " " + xhr.statusText); } }); }); ** 这将帮助您调试。无论如何，您的代码中存在括号错误（可能还有路径错误）

标签： javascript jquery html drop-down-menu frame

【解决方案1】：

这里是 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 中已弃用该框架。在您的位置，我应该从一些 layout 开始，或者也像这样：

<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>

【讨论】：

虽然删除框架是理想的解决方案，也是我想做的事情，但所需的更改量将是巨大的。作为一种临时/节省时间的措施，我将不得不查看您提供的链接。
感谢您的建议和示例代码。您在上面建议的布局是用
和 ID 结构替换我的 FrameStructure.html 页面的简单案例吗？这将如何影响当前的 JavaScript 代码，因为我可以看到大约 80% 的代码使用 parent.PageContent... parent.PageHeader.. top.PageHeader.. etc
@OamPsy 如果您习惯玩这种东西，这很简单，编辑器也很有用：它可以让您替换（搜索和替换）所有出现的字符串。我相信，无论如何，这不会比重新安排菜单花费你更多的时间，你不觉得吗？
我同意，理论上，更改很简单。我想这是连锁反应或由于更改导致的小问题可能需要花费时间来解决。但我想那是我学习解决问题最多的地方。在文本编辑器方面，我使用 sublime text 已经有一段时间了，我很喜欢。你还有其他推荐吗？
@OamPsy 对于改动带来的小问题，之前多多关注，之后浏览器调试器就足够了。如果您有兴趣提高自己的技能，尤其是保持最新状态，请慢慢来。 Gl 与它