用CSS 快速定製下拉式功能表

css|菜單|下拉 　　訪問過 Microsoft 中文首頁的很多人都不會忘記它新奇的下拉式菜單吧. 它的確給我們帶來一股清新的網風, 它實現了網頁上下拉式功能表, 不僅剩去了很多點擊的麻煩, 並開創了一個網頁設計的未來之路. 

　　我們知道, 通過 CSS 可以確切地定義一個 HTML 元素的樣式，包括它的顏色、字型、邊框、3D效果、濾鏡等等，我們在考慮製作下拉式功能表時，首先是想到 CSS 的定位技術，它精確的定位能力可以使我們放心的甚至是在三維空間設定位置和可見度。 

　　CSS 定位使用"position"屬性的兩種方法定位 HTML 元素，這就是相對定位(relative)和絕對位置（absolute),相關的定位屬性有9個： 

　　position、left、top、width、height、clip、overflow、z-index、visibility 

　　當使用"absolute(絕對)"定位元素時，該元素就被當作一個矩形覆蓋物來格式化，格式化後的矩形地區就變成了一個可以放置其他 HTML 元素的容器，這個容器可以淩駕於 HTML 文檔的布局之上，地區下面的文字和圖形永遠也無法環繞和透過該容器顯示出來。這樣被絕對位置了的元素我們稱之為區塊層級元素，在區塊層級元素內放置的 HTML元素我們稱之為子項目。 

　　另外，當我們在移動滑鼠時，具有對 HTML 元素有感應的 JAVA 動作是 onmouseup、onMouseOver、onMouseOut. 

　　onmouseup 為滑鼠點擊之後的釋放動作 
　　onMouseOver 為滑鼠經過時的動作 
　　onMouseOut 為滑鼠離開某地區時的動作. 

　　除此之外，我們建立菜單都是為了表達一定的快捷的操作，通常是超級串連(URL).菜單上的每一條命令都應該對滑鼠的行蹤、點擊有感應。所以，必須建立菜單對滑鼠行為的多級捕獲。首先是容器本身(區塊層級元素)對滑鼠經過時和離開時建立捕獲，其次是菜單上各條命令對滑鼠行為的捕獲。也就是滑鼠經過時，菜單開啟響應，滑鼠離去是菜單關閉。 

　　因為菜單都是在網頁調入時動態建立的，為了減輕瀏覽器的運行負擔，加快速度，所以各個菜單只初始化一次，以後的開啟和關閉操作僅僅是容器本身(區塊層級元素)的可視與隱藏而已。 

　　菜單的動態建立用 document.write 陳述式完成。 ---- 也因為是使用 CSS,因此每個菜單的第一句開頭應該如此： 

　　document.write ('< STYLE type="text/css" >...後跟菜單定位文法,根據瀏覽器的不同一般而言，Netscape 用相對定位， IE 用絕對位置要好一些。 

　　然後是建立容器(區塊層級元素) 對滑鼠 onMouseOver 、 onMouseOut 的捕獲。可以這樣寫: document.write('< span id=菜單標識   >... 

　　其次，以如下方式層層建立菜單及捕獲行為。需要注意的是功能表項目定義是和滑鼠感應操作定義在一塊的。 

　　< a href="超級串連"  > 第一條命令< /a >< br > 

　　< a href="超級串連"   > 第二條命令< /a >< br > 

　　< a href="超級串連"   > 第三條命令< /a >< br > 

　　... 

　　如果要把菜單加上邊框的話，只須在菜單(區塊層級元素)屬性裡加上 border: < 粗細 > < 長度 > < 顏色 > < 立體效果 > 即可。例如： 

　　...{padding: 2pt} #TestMenu1{border:thin soild outset; position:absolute;... 就成為一個立體的細邊菜單。 

　　以下是原代碼 6KB，載入瀏覽器時，滑鼠在“下拉式功能表示範”、“編譯器”和“許可說明” 停靠時，便會出現下拉式菜單。 

作者：雲南昆明市江岸小區