巧用CSS的Border屬性制作特效菜單
許多應用軟件的主菜單都具有這樣的效果，通常是暗色的，一旦鼠標移到菜單上，立即變明亮；鼠標不在菜單上時(shí)是平面的，一旦鼠標移到菜單上，菜單條立即變?yōu)榱Ⅲw，從而增強了菜單的效果。你是否也想使網(wǎng)頁(yè)中的導航菜單產(chǎn)生這種迷人的效果？那么請看下面這個(gè)菜單效果。
鼠標不在菜單上
鼠標在菜單上
上面這種菜單效果的制作思路是這樣的：利用CSS屬性可以動(dòng)態(tài)改變的特點(diǎn)，我們先定義兩組CSS，一組是鼠標不在菜單上的CSS，另一組是鼠標在菜單上用的CSS。再在onmouseover和onmouseout事件中分別調用不同的CSS就能實(shí)現本例的效果了。下面講具體的制作方法：
1、先作一個(gè)1*4的表格，在表格中填入菜單名稱(chēng)并設置好鏈接；
2、為了使菜單產(chǎn)生立體效果，實(shí)際上只要把菜單的上邊框線(xiàn)和左邊框設置為白色，右邊框線(xiàn)和下邊框線(xiàn)設置為黑色，就能產(chǎn)生立體效果了。在Dreamweaver3中按F7（或點(diǎn)擊快速啟動(dòng)欄里那個(gè)象“八卦圖”似的圖標），調出CSS面板，選擇“none”，再點(diǎn)擊面板下部的編輯圖標，在彈出的“Edit Style Sheet”對話(huà)框上按“New”按鈕，在彈出的“New Style”對話(huà)框中選擇“Make Custom Style (class)”后，在下面的“Name”輸入框中輸入“.menustyle1”(也就是給要定義的class取個(gè)名字，注意前面那個(gè)小點(diǎn)不要漏了），按OK，立即彈出“Style Definition for menustyle1”對話(huà)框，這時(shí)就開(kāi)始定義CSS的“style1”了。在左邊的選擇窗口中選擇“Border”，在右邊的面板上定義（也是選擇），在“style”屬性中選擇“solid(實(shí)線(xiàn))”；在“Top”中輸入“1”；然后把“Top”“left”的顏色定義為“#FFFFFF”（白色），“bottom”“right”的顏色定義為“#000000”（黑色）。到此，“menustyle1”已全部定義好，按OK返回，在“Edit Style Sheet”對話(huà)框上按“Done”按鈕結束。我們再用同樣的方法定義一個(gè)“menustyle2”的CSS，在鼠標移開(kāi)時(shí)用，定義的方法相同，只是在定義邊框線(xiàn)顏色時(shí)，把四條邊框線(xiàn)的顏色取與菜單背景相同的顏色。在這里順便講一下，直接把邊框線(xiàn)的寬度設置為“0”，也能達到類(lèi)似的效果，但整個(gè)頁(yè)面要抖動(dòng)一下，效果不好。
3、為了達到整個(gè)菜單條在通常是暗色，鼠標在上面時(shí)是明亮色的效果，要設置兩個(gè)CSS的alpha濾鏡，menustyle3和menustyle4，在Dreamweaver中設置CSS濾鏡在方法上與一般的CSS設置相同（具體可參看“CSS濾鏡應用技巧”專(zhuān)題），只是“alpha”濾鏡的參數較多，其實(shí)在這里只要其中的一個(gè)參數就行了，我在這里給出CSS代碼，直接加在〈head〉和〈/head〉之間也行。CSS全部設置好后，在〈head〉和〈/head〉之間可見(jiàn)到這樣的代碼：
〈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都做好了，下面開(kāi)始加載到相應的地方去。我們在源代碼中找到第一個(gè)菜單項所在的“〈td〉”，在其中加上這樣一行代碼：onmouseover="this.className=‘menustyle1‘" onmouseout="this.className= ‘menustyle2‘" class="menustyle2"，這行代碼的作用是當鼠標在這個(gè)菜單上時(shí)，使用menustyle1定義的格式，當鼠標移開(kāi)時(shí)使用menustyle2定義的格式，后面那個(gè)class="menustyle2"的作用是當前面兩個(gè)事件都沒(méi)有發(fā)生時(shí)，仍使用menustyle2格式，從而保證了菜單的一致性。對其它菜單項同樣也加上這行代碼。這樣菜單項就能隨著(zhù)鼠標的移動(dòng)而從立體、平面之間相互轉換了。
5、在表格的〈table〉標記中加上這樣一行代碼：onmouseover="this.className=‘menustyle4‘" onmouseout="this.className=‘menustyle3‘" class="menustyle3"，這行代碼的作用與上面類(lèi)似，只是這里改變的是透明度，從視覺(jué)上產(chǎn)生一種明暗程度相互轉換的效果。
到此，制作全部結束，按F12看看效果吧！用Dreamweaver3自動(dòng)生成的CSS代碼稍多一點(diǎn)，若對CSS熟悉的話(huà)，可直接編寫(xiě)，不是用Dreamweaver的網(wǎng)友，也可以把代碼直接加在相應的位置即可。本例旨在拋磚引玉，提出一種方法思路，關(guān)鍵在于靈活應用，就可做出許多特殊效果來(lái)，如把菜單項由文本換成圖象，效果將大不一樣；把邊框線(xiàn)的顏色改一下，就可獲得象Dreamweaver主菜單那樣，當鼠標在菜單項上時(shí)，產(chǎn)生凹下去的效果。
本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請
點(diǎn)擊舉報。
