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