小攻城師的戰場筆記

今天設計師說她的選單在 IE 6 裡頭出錯了，情況是：當選單滑出時，若下方有下拉選單 (<SELECT>, dropdown list)，下拉選單會自動置頂，調整了 z-index 也沒有用。稍微研究了一下，她用的選單是 jQuery Multi Level CSS Menu #2 (jQueryslidemenu)，

參考 Jace Ju 的《解決下拉式選單覆蓋圖層的問題》，調整了 jQueryslidemenu 的 JavaScript。概念是在你要顯示的 <div> 底下墊一個 <iframe>，由於 IE6 會將 <iframe> 壓在 <select> 上頭，而 <iframe> 又能調節 z-index，因此這樣就奏效了。



所做的調整包括修改函式 jqueryslidemenu（初始化選單物件的函式），並增加一個判斷目前瀏覽器版本的變數 isIE6。



// 增加 IE6 的判斷。雖然說如果能判斷瀏覽器行為會更好，但是我現階段不知道該怎麼做，考慮到時間壓力，就先這樣寫了。
var isIE6 = (parseFloat(navigator.appVersion.split("MSIE")[1]) < 7 || document.documentMode < 7) ? true : false

// 調整初始化 jquerslidemenu 的函式
// 前半段不異動，一直到 hover 事件才開始處理
var jqueryslidemenu = {
    animateduration: { over: 200, out: 100 }, //duration of slide in/ out animation, in milliseconds
    buildmenu: function (menuid, arrowsvar) {
        jQuery(document).ready(function ($) {
            var $mainmenu = $("#" + menuid + ">ul")
            var $headers = $mainmenu.find("ul").parent()
            $headers.each(function (i) {
                var $curobj = $(this)
                var $subul = $(this).find('ul:eq(0)')
                this._dimensions = { w: this.offsetWidth, h: this.offsetHeight, subulw: $subul.outerWidth(), subulh: $subul.outerHeight() }
                this.istopheader = $curobj.parents("ul").length == 1 ? true : false
                $subul.css({ top: this.istopheader ? this._dimensions.h + "px" : 0 })
                $curobj.children("a:eq(0)").css(this.istopheader ? { paddingRight: arrowsvar.down[2]} : {}).append(
                '<img src="' + (this.istopheader ? arrowsvar.down[1] : arrowsvar.right[1])
                + '" style="border:0;" />'
            )
                // 在這邊找到滑鼠移至選單項目上的事件，開始準備增加自訂的增加 iframe 的內容
                $curobj.hover(
                function (e) {
                    // 前面都不動它
                    var $targetul = $(this).children("ul:eq(0)")
                    this._offsets = { left: $(this).offset().left, top: $(this).offset().top }
                    var menuleft = this.istopheader ? 0 : this._dimensions.w
                    menuleft = (this._offsets.left + menuleft + this._dimensions.subulw > $(window).width()) ? (this.istopheader ? -this._dimensions.subulw + this._dimensions.w : -this._dimensions.w) : menuleft
                    if ($targetul.queue().length <= 1) //if 1 or less queued animations
                        $targetul.css({ left: menuleft + "px", width: this._dimensions.subulw + 'px' }).slideDown(jqueryslidemenu.animateduration.over)
                    // 在「滑鼠移到選單項目上」的時候，判斷是不是 IE6，
                    // 如果是 IE6，就增加一個大小、位置都和第二層選單一樣大的 iframe
                    if (isIE6) {
                        try {
                            var oIframe = document.getElementById('HelpFrame')
                            if (oIframe == null)
                                throw e
                        }
                        catch (e) {
                            var oIframe = document.createElement('iframe')
                            oIframe.id = 'HelpFrame'
                            oIframe.scrolling = 'no'
                            // 這邊因為一直找不到 div，我直接寫死，把 iframe 加在我包住選單的 div
                            document.getElementById("myslidemenu").appendChild(oIframe)
                        }

                        // 設定選單的大小與位置
                        menuWidth = this._dimensions.subulw
                        menuHeight = this._dimensions.subulh
                        oIframe.frameborder = 0
                        oIframe.style.position = 'absolute'
                        oIframe.style.top = this.offsetTop
                        oIframe.style.left = this.offsetLeft
                        oIframe.style.zIndex = -1
                        oIframe.style.width = parseInt(menuWidth)
                        oIframe.style.height = parseInt(menuHeight)
                        oIframe.style.display = 'block'
                    }
                },
                function (e) {
                    var $targetul = $(this).children("ul:eq(0)")
                    $targetul.slideUp(jqueryslidemenu.animateduration.out)
                    // 在「滑鼠離開選單項目上」的時候，判斷是不是 IE6，
                    // 如果是 IE6，就隱藏先前建立的 iframe
                    if (isIE6) {
                        var oIframe = document.getElementById('HelpFrame')
                        if (oIframe != null)
                            oIframe.style.display = 'none'
                    }
                }
            ) //end hover
                $curobj.click(function () {
                    $(this).children("ul:eq(0)").hide()
                })
            }) //end $headers.each()
            $mainmenu.find("ul").css({ display: 'none', visibility: 'visible' })
        }) //end document.ready
    }
}






在 jQueryslidemenu 原作的討論串中也有人提供另一種解決方案：隱藏表單中屬性為 select-one 的物件。