CSS技術結合映像實現動態效果的菜單導航

css|菜單|導航|動態

　　CSS技術結合映像實現動態效果的菜單導航

　　本文介紹一些我們經常使用但很少關注的東西，在下面的敘述中我們假設你的CSS使用的是@import技術，因為這裡CSS可能會讓你對Opera 4失去信心。如果你把映像作為你的頁面配置的一部分，在CSS的控制之下內嵌影像很可能是你不希望得到的結果如果你使用的是一個不支援CSS2標準的瀏覽器例如Opera 4。下面介紹一個例子，使用一些GIF映像去修飾圓角。

　　事實上我不想在網頁的HTML代碼中內嵌影像，因為它們代表的只是視覺上的東西，而不是內容上的體現，因此我將它們和其它一些有代表性的部分放在CSS之下控制。 這個方法將使你更加方便地控制頁面，讓其變得更加漂亮。為了做出環繞的效果，我利用了CSS背景映像:使用這些背景映像的目的是要更好地適應CSS的布局，我們將這些映像嵌入層的背景中。

　　在這裡你可以看見我是怎樣定義圖片的大小的(19px*37px)，而且在每個圖片的末端有相應的背景映像。然後將這兩幅圖片放置在預先確定好了的線性對象裡邊。當然很多這些原理都是可以重複使用的，因此你最後的CSS代碼不需要很大。這個方法的唯一缺點就是它不能用來調整動態圖片的大小，如果你的層比映像小的話，它將被忽略，如果你的層比映像大的話，它將反覆被填進空白區。但是你很有可能就是不希望映像在運作中的任何位置都能被覺察到。

　　CSS生動影像技術

　　給CSS文本菜單賦予動態技術，例如網頁的左側菜單，這種菜單現在被越來越多的人所喜愛。但是我不認為我曾經看見過這種技術:一個純粹使用CSS來實現這一效果的技術。它讓菜單擁有映像轉換功能，這裡的問題就是我們用純CSS去實現這一效果。下面使用兩個步驟來世實現菜單的映像變換技術。第一步僅僅變動背景顏色;第二步，就是精確的旋轉多維映像。(警告:這門技術的缺點就是其中一些技術不能與Opera 6一起使用，雖然他們在Opera 7中是一種很好的技術。)

　　變換背景映像1

　　如果這是一幅透明的背景映像，那我們就可以非常容易地使用選取器改變其背景色。 在本例中映像被嵌入在HTML資源中，這就意味著在不支援CSS2標準的瀏覽器中它也會顯示(除了文本瀏覽器!). 其代碼將比下面的例子複雜，但它能在我嘗試的所有瀏覽器中運作。要注意的是在實現效果的過程中一次僅能下載一張映像。

　　變換背景映像2

　　這個版本相對版本1是非常簡單的。其映像是CSS背景映像，因此不支援CSS2標準的瀏覽器中不會顯示出來:但是我們提供了一個可選擇的文本連結，這是一個被淘汰了的例子。

　　旋轉按鈕1

　　現在針對不需要JS指令碼語言進行支撐的旋轉映像講述一些新的方法，第一種方法是使用背景圖,利用a:hover特性，當指標指向映像時改變背景圖,因此如果關閉了CSS的話映像就不會顯示,同時我們還可以獲得可選擇的文本連結.該方法支援IE6,Netscape 7, Mozilla and Opera 7,但不支援Opera 6.第三類按鈕狀態可以通過相似方法:活躍選取器來傳給映像。讀者可以把這種方法當作是練習做一做。

　　旋轉按鈕1a

　　這是個不同於按鈕1的按扭.我們再次使用一幅CSS背景圖,但是不是使用一個旋轉選擇來載入一幅新的映像給按鈕的其它狀態,我們使用CSS來改變現有映像的位置.這樣使用如果映像太大,則背景映像被修剪.因此我們的按鈕是單獨的映像包含兩種按鈕狀態.通常顯示上半部映像,但是當按鈕旋轉映像則替換顯示下半部.因此這是完整的映像.使用這種方法這裡有兩種優勢.首先,如果訪問按鈕時為了減少下載資料數量-僅下載一幅映像帶替兩幅-因此這是更快的.其次,在第一次訪問時沒有延遲去等待下載第二幅映像:它已經在這了.不需預載複雜的映像。不利方面就是如果按鈕不被訪問,則一些位頻寬被浪費了,這些是在使用時的觀念,對按鈕1,HTML和CSS也是如此.主要的差異在:旋轉選擇。

　　結轉按鈕2

　　如下,另一途徑實現CSS旋轉映像為使用映像的Z索引特性,Z索引控制顯示哪個元素在最頂層.不幸的是,它不支援IE6或Opera 6.Opera 7, Mozilla 和 Netscape 7能工作,但是在這種情況下Mozilla是如此的慢,在CSS2瀏覽器旋轉不工作,僅頂層映像顯示正常.在非CSS2瀏覽器頂層和旋轉映像並排顯示,看起來是古怪的. Internet Explorer的工作區包含一個小處理常式,如果映像背景色改變了,則Z索引也改變,Internet Explorer獲得變化進行相關工作.菲利普通過改變三原色值改變顏色(例如將#ffffff改為#fffffe)如此很小的改變效果都是顯著的。