在Web上使用菜單可以極大地節約頁面的空間，同時也比較的符合使用者從Windows上繼承下來的UI操作體驗。在以往的Web頁菜單設計中，我們普遍使用div嵌套table的方式來實作菜單，這樣的菜單有個最緻命的問題就是會被<select>覆寫。我們為了解決這個問題，有時我們幹脆在顯示圖層菜單的同時隐藏頁面上的所有下拉清單框，在菜單消失的時候，再顯示他們。這個方法雖然可以解決問題，而其優化過後還可以隻隐藏和下拉清單框相交的清單框，但是這些解決方法都不是十分的完美。還有些小問題，這樣的菜單定位很困難，因為在<div>顯示的時候，使用者可以使用滑鼠滾輪滾動頁面，這樣一來是否要讓<div>菜單和頁面滾動同步呢？如果不要，頁面被滾走了，菜單仍顯示在一個和自己毫不相關的位置上很是古怪。如果要同步，那麼噩夢就來了，因為被滾動的區域不一定就是<body>區域，還可能是一些類似<div
style="overflow:auto"><div>的區域，要算出菜單的位置将會非常的麻煩。
下面将介紹的Popup來實作的Web頁菜單将完全解決<div>做為菜單容器時遇到的問題，Popup視窗是IE5.5及以後版本提供的一個新feature。什麼是popup呢？簡單說popup其實就是一個彈出視窗，它擁有以下特點(MSDN描述)：
·popup視窗在使用者點選它自身之外的任何地方或另一個popup打開的時候會自動關閉；
·popup在顯示的時候不能獲得焦點，是以使用者已focused的操作将繼續在其父視窗中執行；
·組成popup的DHTML可以存儲在其父document或其他的document元素中；
·popup視窗中不支援文本框一類的編輯框element；
·不能選中popup視窗中的元素；
·不能在popup視窗中navigate(點選popup中的連接配接，不能讓更新的内容顯示到這個popup中)；
·popup視窗一旦顯示就不能移動和resize。
這裡MSDN說的不全，而且有的地方不是很準确，popup視窗還有幾個重要的特性。它可以超出浏覽器的視窗範圍而且也不會被下拉框、flash、IFrame等這些元素遮擋。實際上popup裡的内容是可以被選擇的，不知道MSDN說的不能選擇是啥意思
?。關于MSDN說popup不能獲得焦點也有點問題，其實是popup裡的編輯框類控件不能獲得焦點，而其它的非可編輯控件是可以獲得焦點的。而且popup顯示的時候，IE主視窗不能獲得滑鼠的onmousewheel事件。
這樣的一些特性，恰好表明了popup視窗非常的适合用來制作彈出菜單，并且由于popup視窗顯示的時候，IE視窗内的文檔是不能被移動的，這樣就不存在context
menu的位置同步問題了，因為畢竟popup視窗不能move(move位置需要hide以後在新的位置上重show)，這個問題還比較讨厭。
使用popup視窗制作無限級别的菜單，有兩個問題要解決：一個是要能在一個IE中顯示多個Popup視窗，二是要能把視窗中的一些事件俘獲并執行我們腳本過程。MSDN在描述popup視窗特性時，第一條就說了隻要有另一個popup視窗開啟，先前顯示的popup視窗就會自動關閉。這下怎麼辦呢？不過既然都說了要實作無限級的菜單了，辦法還是有的。對于popup，使用方式其實是很簡單的，他一共就隻包含了兩個方法：hide()和show(...)，和兩個屬性：document和isOpen。雖然在IE中我們連續的調用n次window.createPopup().show(...)隻能出來一個popup視窗被顯示，可是我們可以調用popup.document.parentWindow的createPopup方法，它産生的popup視窗在顯示的時候就不會關閉前面已顯示的popup視窗，并且對于新的popup用這個方法可以繼續開啟child
popup。這個問題再研究下去，會發現IE實作popup的一些怪異的地方(當然這些對于我們實作這個菜單關系不太大，隻是覺得混亂)。
比如我們在一個IE視窗中，var popup = window.createPopup(); var win =
popup.document.parentWindow; 我們會發現 window !=
win，對于多個popup可以共存，這個不相等還能了解，但是當我們調用win.resizeTo(...)的時候，我們發現父IE視窗被resize了
。同樣我們在popup中select all，結果也是父IE視窗裡的内容被全選了@_@...
本文轉自部落格園鳥食軒的部落格，原文連結：http://www.cnblogs.com/birdshome/，如需轉載請自行聯系原部落客。