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

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

 

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.