- 相關(guān)軟件
>用CSS 快速定制下拉菜單 創(chuàng)建者：webmaster 更新時間：2005-06-08 23:53訪問過 Microsoft 中文主頁的很多人都不會忘記它新奇的下拉式菜單吧. 它的確給我們帶來一股清新的網(wǎng)風(fēng), 它實現(xiàn)了網(wǎng)頁上下拉菜單, 不僅剩去了很多點擊的麻煩, 并開創(chuàng)了一個網(wǎng)頁設(shè)計的未來之路.
我們知道, 通過 CSS 可以確切地定義一個 HTML 元素的樣式，包括它的顏色、字體、邊框、3D效果、濾鏡等等，我們在考慮制作下拉菜單時，首先是想到 CSS 的定位技術(shù)，它精確的定位能力可以使我們放心的甚至竊諶占瀋柚夢恢煤涂杉浴?
CSS 定位使用"position"屬性的兩種方法定位 HTML 元素，這就是相對定位(relative)和絕對定位（absolute),相關(guān)的定位屬性有9個：
position、left、top、width、height、clip、overflow、z-index、visibility
當使用"absolute(絕對)"定位元素時，該元素就被當作一個矩形覆蓋物來格式化，格式化后的矩形區(qū)域就變成了一個可以放置其他 HTML 元素的容器，這個容器可以凌駕于 HTML 文檔的布局之上，區(qū)域下面的文字和圖形永遠也無法環(huán)繞和透過該容器顯示出來。這樣被絕對定位了的元素我們稱之為塊級元素，在塊級元素內(nèi)放置的 HTML元素我們稱之為子元素。
另外，當我們在移動鼠標時，具有對 HTML 元素有感應(yīng)的 JAVA 動作是 onmouseup、onMouseOver、onMouseOut.
onmouseup 為鼠標點擊之后的釋放動作
onMouseOver 為鼠標經(jīng)過時的動作
onMouseOut 為鼠標離開某區(qū)域時的動作.除此之外，我們建立菜單都是為了表達一定的快捷的操作，通常是超級連接(URL).菜單上的每一條命令都應(yīng)該對鼠標的行蹤、點擊有感應(yīng)。所以，必須建立菜單對鼠標行為的多級捕獲。首先是容器本身(塊級元素)對鼠標經(jīng)過時和離開時建立捕獲，其次是菜單上各條命令對鼠標行為的捕獲。也就是鼠標經(jīng)過時，菜單打開響應(yīng)，鼠標離去是菜單關(guān)閉。
因為菜單都是在網(wǎng)頁調(diào)入時動態(tài)建立的，為了減輕瀏覽器的運行負擔(dān)，加快速度，所以各個菜單只初始化一次，以后的打開和關(guān)閉操作僅僅是容器本身(塊級元素)的可視與隱藏而已。
菜單的動態(tài)建立用 document.write 語句完成。 ---- 也因為是使用 CSS,因此每個菜單的第一句開頭應(yīng)該如此：
document.write ('< STYLE type="text/css" >...后跟菜單定位語法,根據(jù)瀏覽器的不同一般而言，Netscape 用相對定位， IE 用絕對定位要好一些。
然后是建立容器(塊級元素) 對鼠標 onMouseOver 、 onMouseOut 的捕獲。可以這樣寫: document.write('< span id=菜單標識 onMouseOver="發(fā)生的打開動作" onMouseOut="菜單的關(guān)閉動作" >...
其次，以如下方式層層建立菜單及捕獲行為。需要注意的是菜單項定義是和鼠標感應(yīng)操作定義在一塊的。
< a href="超級連接" onMouseOver="菜單響應(yīng)事件" onMouseOver="菜單關(guān)閉事件"> 第一條命令< /a >< br >
< a href="超級連接" onMouseOver="菜單響應(yīng)事件" onMouseOver="菜單關(guān)閉事件" > 第二條命令< /a >< br >
< a href="超級連接" onMouseOver="菜單響應(yīng)事件" onMouseOver="菜單關(guān)閉事件" > 第三條命令< /a >< br >
...
如果要把菜單加上邊框的話，只須在菜單(塊級元素)屬性里加上 border: < 粗細 > < 長度 > < 顏色 > < 三維效果 > 即可。例如：
...{padding: 2pt} #TestMenu1{border:thin soild outset; position:absolute;... 就成為一個立體的細邊菜單。
以下是原代碼 6KB，載入瀏覽器時，鼠標在“下拉菜單演示”、“編譯器”和“許可說明” 停靠時，便會出現(xiàn)下拉式菜單。
相關(guān)文章
本頁查看次數(shù):