0

我正在修改一个使用框架的非常古老的网站。我从导航菜单开始，采用了 jQuery 下拉菜单的功能。

虽然菜单在主页上成功下拉，但当我导航到另一个时，下拉菜单无法重叠到新框架中。我可以看到下拉列表的一部分，但是它在新框架的“后面”。

框架结构.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>

我收到以下错误：

语法错误：缺少：属性 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>

仍然收到以下错误：

语法错误：缺少：属性 id 之后

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

哪个指向 ("#header"

4

1 回答 1

2

这是 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-框架-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>
于 2013-06-10T11:02:51.590 回答