Question

我正在修改一个使用框架的旧网站。我已经开始使用导航菜单，采用了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”

Answer 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开始，或者也就是这样：

导航菜单重叠框架

1 个答案: