許多應用軟體的主菜單都具有這樣的效果，通常是暗色的，一旦滑鼠移到菜單上，立即變明亮；滑鼠不在菜單上時是平面的，一旦滑鼠移到菜單上，菜單條立即變為立體，從而增強了菜單的效果。你是否也想使網頁中的導覽功能表產生這種迷人的效果？那麼請看下面這個菜單效果。
滑鼠不在菜單上
滑鼠在菜單上
上面這種菜單效果的製作思路是這樣的：利用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主菜單那樣，當滑鼠在功能表項目上時，產生凹下去的效果。
