詳解iframe製作三級級聯菜單

起源
任務本來是交給新來的同事做的，但由於新同事上手較慢，而功能卻著急上線使用，不得已就得親自動手了。

Task：將原有隻包含一級欄目的選單調整為支援三級級聯的選單

實作：滑鼠懸停在一級選單時，彈出二級下列選單，滑鼠停留在某二級選單時，彈出三級下拉選單，遺留程式碼如下：

<p id="main">
    <iframe src=&#39;navbar.do&#39; width=800 height=40></iframe>
    <iframe src=&#39;main_content.do&#39;></iframe>
</p>

遇到的問題：

原始功能使用iframe分別載入頁面的導航欄與內容區域，實現上本無可厚非（頻繁使用iframe實在不是最佳實踐），但新加的二三級欄位破壞了原有的頁面結構，由於導航列是固定高度的，下拉選單的加入，固定高度導致下拉選單的內容被包含它的iframe所遮擋。

效果圖：紅線是上下兩個iframe的分界線

第一直覺想到的方案是將導覽列的內容從iframe中出，放置於主頁中

<p id="main">
    <p id="nav-bar"></p>
    <iframe src=&#39;main_content.do&#39;></iframe>
</p>

問題是解決了，感慨也有，那就是：

我們不缺碼農，缺少的是設計師，任何不經過思考的設計都是坑爹

再思考
回到這個問題，琢磨一下初始的設計，作者使用兩個請求分別載入導覽列和頁面主體內容區域，一般說來，首頁內容區域的業務邏輯是確定的，所以內容區域也用不著使用iframe來實現，合理的頁面佈局應該是下面的樣子

<p id="main">
    <p id="nav-bar"></p>
    <p id="content"></p>
</p>

#補充
測試火急火燎的跑來，著急的說道，又發現問題了，下拉菜單是可以看到了，但是content中顯示的視頻卻擋住了部分下拉菜單，效果如下圖：

效果圖

影片載入完畢後下拉選單中綠色部分會被影片覆蓋而顯示不完整，
描述實際的業務場景：影片是採購的第三方的服務，透過在頁面中動態載入第三方腳本動態產生embed標籤進而播放影片

為什麼
#給動態產生的embed元素設定z-index屬性是否可以呢？很失望，不奏效。
那是什麼原因呢？
之後發現了flash的渲染模式wmode參數，預設情況下wmode=window，主要是基於效率考慮，這就導致預設顯示方式下flash總是會遮住位置與他重合的所有html，設定wmode= Opaque可以解決此類問題，此時flash不會在高於瀏覽器html渲染表面，而是與其他元素一樣在同一個頁面上。具體資訊可以參考這裡.

接下來的工作就是找到由腳本動態產生的embed元素，並且為其設定wmode參數為Opaque，程式碼如下：

var timer = setInterval(function(){
    var elem = document.getElementsByTagName("embed")[0];
    if( elem ){
        elem.setAttribute("wmode","opaque");
        clearInterval(timer);
    }
}, 100 );

#OK了嗎!
測試發現問題依舊，到底怎麼回事，為什麼沒起作用呢？
wmode用來設定flash的渲染模式，由於我們程式碼中embed元素是動態產生的，當我們找到embed元素並為其設定渲染模式時，此時flash已經渲染完成，再次設定其wmode是不會有效果的， 怎麼辦？

• 聯絡廠商解決，讓其腳本在生成embed元素是預設指定渲染模式為opaque，時效上應該會比較慢，況且廠商對於我們的建議是否採納也未可知。

• 既然embed元素是動態生成的，那我們自己是否也可以去做同樣的事情呢，在找到embed元素後，我們對embed元素進行修改，刪除flash廠商生成的embed元素，插入我們修改後的embed元素。

【相關推薦】

1. 免費css線上影片教學

2. css線上手冊

3. php.cn獨孤九賤（2）－css影片教學

以上是詳解iframe製作三級級聯菜單的詳細內容。更多資訊請關注PHP中文網其他相關文章！