导航子菜单项未出现在 iframe 中答案

【问题标题】：navigation submenu items are not appearing in an iframe导航子菜单项未出现在 iframe 中
【发布时间】：2018-04-26 19:05:59
【问题描述】：

我设置了 3 个 iframe。 iframe 1 用于页面标题； iframe 2 用于导航菜单和子菜单； iframe 3 用于内容。我一直无法显示导航栏中的子菜单项（位于 iframe 2 中）。我有以下代码，可提供有关如何解决此问题的任何反馈。

index.php
    <DOCTYPE HTML>
    <HTML>
         <meta name="viewport" content="width=device-width, initial-scale=1">   
<style>

#headingiframe {
position: static;
overflow-x:hidden;
overflow-Y:hidden;
z-index: 1;
}
#contentiframe {
position : relative;
left:0;
top: 0;
z-index: 1;
}

#menuiframe {
position: relative;
overflow-Y:visible;
z-index: 5;
}

</style>

<div id="headingiframe">
 <iframe width="100%" height="12%" src="header_on_screen.php" scrolling=NO >         </iframe>   
</div>

<div id="menuiframe">
<iframe width="100%" height="10%" src="show_menu.php" scrolling=NO >     </iframe>
</div>

<div id="contentiframe">
<iframe width="100%" height="70%" src="contents.php" scrolling=YES > </iframe>
</div>
        </head>  
        </body>
    </html>

show_menu.php

    <DOCTYPE HTML>
    <HTML>
         <meta name="viewport" content="width=device-width, initial-scale=1">   

<style>
#outer {
position: relative;
left:0;
top: 0;
width: 100%; 
z-index: 3;
    overflow-Y:visible;
}

#inner{
    background: green;
    display: inline-block;
        overflow-Y:visible;
}

.cover {
    position: absolute;
    border: none;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    overflow-Y: visible;
    height:100%;
 }


ul#menu, ul#menu ul.sub-menu {
padding:4;
margin: 4;
z-index: 6;
overflow-Y: visible;
display: inline-block;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
overflow-Y: visible;
    z-index: 6;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #666;
padding: 10px;
display: inline-block;
overflow-Y: visible;
    z-index: 6;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
overflow-Y: visible;
    z-index: 6;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
z-index: 6;
overflow-Y: visible;
}
ul#menu li:hover ul.sub-menu {
display:block;
position:absolute;
overflow-Y: visible;
z-index:6;
}

</style>
<head>
<body>

<div id="outer">

<div id="inner">
    <div id="navMenu">    
        <ul id="menu">

            <li>
                <a href="#">About</a>
            </li>
            <li><a href="#">Menu 2</a>
                <ul class="sub-menu">
                    <iframe class="cover" src="about:blank" ></iframe>

                    <li>
                        <a href="#">Sub Menu 1</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 2</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 3</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 4</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Menu 3</a>

            </li>
            <li><a href="#">Menu 4</a>

                <ul class="sub-menu">
                     <iframe class="cover" src="about:blank" ></iframe>

                    <li>
                        <a href="#">Sub Menu 1</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 2</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 3</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 4</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Menu 5</a>
            </li>



       </ul>
 </div>
 </div>
 </div>

        </head>  
        </body>
 </html>        



Header_on_screen.php

<?php // header_on_screen.php

echo <<<_END

<html>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<table style="width:100%">
    <TR>
        <TH style="color:green;text-align:center"><h2>iFrame Management System </h2></TH>
    </TR>
    <TR>
        <TH scope="colgroup">Version 0.6 </TH>
    </TR>
</table>
_END;

?>      



 Contents.php
 <?PHP  


    echo"<BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.

"

?>

【问题讨论】：

您是否收到与加载第二个iframe 的内容相关的网络错误？
我没有收到错误。行为是子菜单项并未全部显示在内容 iframe 的前面。
内容 iframe 与子菜单重叠？
这是正确的 - 内容 iframe 与菜单 iframe 中的子菜单重叠。
尝试从#contentiframe 的样式声明中删除top:0;。

标签： php html css iframe

【解决方案1】：

使用框架或 iframe 以某种方式创建网页布局是非常非常糟糕的选择。因为它们实际上是嵌入在一个页面中的不同页面。甚至搜索引擎也算作不同的页面。在 2018 年，您根本不应该以这种方式使用 iframe。

【讨论】：

感谢您的意见，但我看到一些网站的菜单栏是固定的（不可滚动），而内容是可滚动的。使用带有子菜单的菜单栏使导航比返回窗口顶部选择另一个菜单/子菜单要容易得多。
您实际上可以使用一些简单的 css 代码创建粘性菜单栏。在像 Bootstrap 这样的框架中，这已经被解决了。这样做的想法是通过 {position:fixed} 使导航栏固定位置，并为导航栏提供准确的位置。您可以在 bootstrap 4 getbootstrap.com/docs/4.1/examples/navbar-fixed 中查看此示例
佩什劳。谢谢你的建议。我看了一遍，我很难全部掌握。我正在开发这个 Web 应用程序作为练习，让我的手臂掌握 PHP、HTML、Javascript 和 MySQL。网络应用程序大约完成了 30%。烦人的问题是，我试图在 iframe 中显示菜单和相关的子菜单，但子菜单在 iframe 之外并不完全可见。在这一点上，我不打算沉浸在 jquery 和 bootstrap 中。您对可以解决此问题的样式部分中缺少的内容有什么想法吗？