巧用CSS的Border屬性製作特效菜單

- 中國WEB開發者網絡 (http://www.webasp.net)
-- 技術教程 (http://www.webasp.net/article/)
--- 巧用CSS的Border屬性製作特效菜單 (http://www.webasp.net/article/18/17947.htm)

-- 作者：未知
-- 發佈日期： 2005-04-25

許多應用軟件的主菜單都具有這樣的效果，通常是暗色的，一旦鼠標移到菜單上，立即變明亮；鼠標不在菜單上時是平面的，一旦鼠標移到菜單上，菜單條立即變為立體，從而增強了菜單的效果。你是否也想使網頁中的導航菜單產生這種迷人的效果？
　　上面這種菜單效果的製作思路是這樣的：利用CSS屬性可以動態改變的特點，我們先定義兩組CSS，一組是鼠標不在菜單上的CSS，另一組是鼠標在菜單上用的CSS。再在onmouseover和onmouseout事件中分別調用不同的CSS就能實現本例的效果了。下面講具體的製作方法：
　　1、先作一個1*4的表格，在表格中填入菜單名稱並設置好鏈接；
　　2、為了使菜單產生立體效果，實際上只要把菜單的上邊框線和左邊框設置為白色，右邊框線和下邊框線設置為黑色，就能產生立體效果了。在Dreamweaver3中按F7（或點擊快速啟動欄裡那個像「八卦圖」似的圖標），調出CSS面板，選擇「none」，再點擊面板下部的編輯圖標，在彈出的「Edit Style Sheet」對話框上按「New」按鈕，在彈出的「New Style」對話框中選擇「Make Custom Style (class)」後，在下面的「Name」輸入框中輸入「.menustyle1」(也就是給要定義的class取個名字，注意前面那個小點不要漏了），按OK，立即彈出「Style Definition for menustyle1」對話框，這時就開始定義CSS的「style1」了。在左邊的選擇窗口中選擇「Border」，在右邊的面板上定義（也是選擇），在「style」屬性中選擇「solid(實線)」；在「Top」中輸入「1」；然後把「Top」「left」的顏色定義為「#FFFFFF」（白色），「bottom」「right」的顏色定義為「#000000」（黑色）。到此，「menustyle1」已全部定義好，按OK返回，在「Edit Style Sheet」對話框上按「Done」按鈕結束。我們再用同樣的方法定義一個「menustyle2」的CSS，在鼠標移開時用，定義的方法相同，只是在定義邊框線顏色時，把四條邊框線的顏色取與菜單背景相同的顏色。在這裡順便講一下，直接把邊框線的寬度設置為「0」，也能達到類似的效果，但整個頁面要抖動一下，效果不好。

　　3、為了達到整個菜單條在通常是暗色，鼠標在上面時是明亮色的效果，要設置兩個CSS的alpha濾鏡，menustyle3和menustyle4，在Dreamweaver中設置CSS濾鏡在方法上與一般的CSS設置相同（具體可參看「CSS濾鏡應用技巧」專題），只是「alpha」濾鏡的參數較多，其實在這裡只要其中的一個參數就行了，我在這裡給出CSS代碼，直接加在〈head〉和〈/head〉之間也行。CSS全部設置好後，在〈head〉和〈/head〉之間可見到這樣的代碼：
〈style type="text/css"〉
〈!--
.menustyle1 { border: solid; border-width: 1px 1px 1px 1px; border-color: #FFFFFF #000000 #000000 #FFFFFF}
.menustyle2 {border:solid;border-width:1px;border-color:#ccccff;}
.menustyle3 {filter:alpha(opacity=60)}
.menustyle4 {filter:alpha(opacity=100)}
.
--〉
〈/style〉

　　4、CSS都做好了，下面開始加載到相應的地方去。我們在源代碼中找到第一個菜單項所在的「〈td〉」，在其中加上這樣一行代碼：onmouseover="this.className='menustyle1'" onmouseout="this.className= 'menustyle2'" class="menustyle2"，這行代碼的作用是當鼠標在這個菜單上時，使用menustyle1定義的格式，當鼠標移開時使用menustyle2定義的格式，後面那個class="menustyle2"的作用是當前面兩個事件都沒有發生時，仍使用menustyle2格式，從而保證了菜單的一致性。對其它菜單項同樣也加上這行代碼。這樣菜單項就能隨著鼠標的移動而從立體、平面之間相互轉換了。

　　5、在表格的〈table〉標記中加上這樣一行代碼：onmouseover="this.className='menustyle4'" onmouseout="this.className='menustyle3'" class="menustyle3"，這行代碼的作用與上面類似，只是這裡改變的是透明度，從視覺上產生一種明暗程度相互轉換的效果。

　　到此，製作全部結束，按F12看看效果吧！用Dreamweaver3自動生成的CSS代碼稍多一點，若對CSS熟悉的話，可直接編寫，不是用Dreamweaver的網友，也可以把代碼直接加在相應的位置即可。本例旨在拋磚引玉，提出一種方法思路，關鍵在於靈活應用，就可做出許多特殊效果來，如把菜單項由文本換成圖像，效果將大不一樣；把邊框線的顏色改一下，就可獲得像Dreamweaver主菜單那樣，當鼠標在菜單項上時，產生凹下去的效果。

webasp.net