[英]Iframe z-index for Drop down menu
我有一個下拉菜單代碼,我的目標是通過iFrame加載該代碼。 不幸的是,我無法弄清楚如何使用Z-index將視圖元素加載到iFrame之外。 代碼如下:
<style type="text/css">
/*Initialize*/
ul#menu, ul#menu ul.sub-menu
{
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li
{
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a
{
text-decoration: none;
color: #fff;
background: #666;
padding: 5px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li
{
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu
{
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
ul#menu li:hover ul.sub-menu
{
display:block;
}
</style>
<ul id="menu">
<li>
<a href="#">Menu 1</a>
</li>
<li>
<a href="#">Menu 2</a>
<ul class="sub-menu">
<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">
<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>
I have written the code for i frame. The drop down menu is in "test.html"
<iframe src="test.html" width="500" height="30"></iframe>
so i want load this css drop down menu in a iframe but the list view should come out of the iframe so how to do it , Please help me .
您的靜態頁面必須使用以下代碼編寫:
<iframe src="test.html" style="position: absolute; width: 500px; height: 100%; top: 0; bottom: 0; z-index: 1000; border: 0;"></iframe>
<div style="margin-top: 60px;">
.... your content here ...
</div>
您無法從iframe中看到可見的溢出。 另外,iframe通常是不好的做法!
如果您要包含文件代碼,而不是將其寫在網站的每個HTML文件中,則iframe都有更好的選擇。 查看服務器端include 。 但是,您將需要某種服務器來處理此類請求。
如果您想使用純前端內容,請在單擊導航按鈕時嘗試使用JavaScript切換內容或使用AJAX請求加載新內容。
嘗試:
<iframe seamless src="test.html"></iframe>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.