手工打造分離式滑動門導航菜單

導言：本文一步一步手把手教你打造一個極酷的三層分離的標準滑動門導航菜單，從思路、原理、步驟，手段可謂“無所不用其極”，即便你是，相信你看了本文後，也能打造出屬於自己的超漂亮的標準導航選單。本選單無冗餘結構，利於資料動態輸出，非常適合用在平常的專案中去。本教程中講到了基本的滑動門原理，相信對那些還在這條路上摸索的朋友會有一些幫助！當然如果有什麼錯誤和問題，也歡迎大家來探討。

本導覽選單想達到的理想目標是：

1. 漂亮，有個性。

2. 結構清晰，語意明確，無冗餘標籤。

3. 表現、結構、行為三層分離，無侵入式。

4. 有利於後台程式的資料輸出。

5. 菜單有三態效果的變化。

6. 能高亮記錄點擊後的選單項目。

7. 自適應文字的寬度。當文字內容長短變化時按鈕能適時變化。

8. 相容於各大主流瀏覽器。

讓我們一步一步的實現這種理想的菜單吧！
在論壇中常看到很多朋友在製作菜單，但說實話，不是結構冗餘，就是有形無神，或有神無貌。而我們現在要打造的就是極品菜單。無論您是新手或老手，在這個教程中都應該有所收穫。
一個理想的菜單其結構應該是乾淨的、無冗餘、分離的，然而因為種種的原因，會為它加上許多無意義的東西，到最後，會離「乾淨」越來越遠。所以在做菜單前，有些原則是在整個製作過程一直要牢記的，不能以任何外力所阻擾。

結構篇

在我的印像中，理想的標準選單應該具有下面的結構：

選單的最原始的結構有了，可以看到這裡面是沒有任何無意義的標籤，每個標籤都有各自的語意。我們在瀏覽器中看下，啊哦，確實很簡陋，就是原始的文字，像什麼，嗯，就像我們在菜館裡點菜用的菜單，可能比那個還簡單，並且每個菜單前面還有一個小圓點！哦，天啦，離我們的漂亮菜單還差好大一截呢！

樣式篇

好吧，它現在還只是一個骨架，我們稍微給它美化一下，加點簡單的樣式，至少應該去掉小圓點吧，並且讓它水平排列吧！

好，加點樣式吧！

嗯，現在看看，達到小目標了。
骨架有了，接下來就是給每個選單項目穿上漂亮的衣裳。
要滿足第一項要求，首先要有一個漂亮的按鈕，自已畫一個，哦，我不是美術人員，難！不過，別恢心，網路之大，無奇不有，說不定人家已經有做好的，google一下，還真發現了一個，感謝啊！ （眼淚哪個嘩嘩的….）按鈕原始碼：http://bbs.blueidea.com/thread-2860891-1-1.html

有了設計好的按鈕原始碼，省去設計的一環，真好。但要做成三態按鈕，還需要我們改造這個按鈕。看到第七條目標了嗎，我們要做自適應的按鈕，所以要對這個按鈕做一些加工處理。

我們將這三個按鈕分別表現為滑鼠移開、點擊後、滑鼠移上時的三種狀態，要做滑動門選單，需要將一個按鈕從中間剖開，左邊圖處放在左側，右邊圖片放在右側。要適應文字加長的情況，還要將這個圖層寬度拉長一點，但這張圖片有很複雜的陰影特效，不能隨便拉伸，否則效果就不像了。我們就從中間給它剖開，將右邊圖片的左側向前平輔拉伸。所以我們先將它如圖哪樣切成六片，然後將這六張圖片合併在一起。為什麼要這樣呢？來看看css sprites原理吧！這裡就不詳述了，可以看我另一篇文章《製作一幅撲克牌系列一---css sprites圖片背景優化技術》

上圖第一和第二張圖片組成普通選單樣式（預設樣式），第三、第四個圖片組成翻滾樣式，第五和第六個圖片組成點擊後的選單項目樣式。
我們將陰影圖片特別提取出來，作成一張很小的背景圖。

該要的圖形都準備好​​了，接下來，我們將這個圖片加在選單項目上。一個按鈕要用到兩張圖片才能表現出來。地球人都知道，一個html標籤只能裝一張圖片（如果你發現一個標籤能裝兩張圖片，請及時告訴我，我請你吃飯！）。哦！我的選單結構中每一項剛好有兩個標籤，一個是li，它裡面有一個A標籤，剛好可以用來裝左右兩張圖片。 Li用來裝左側的圖片，A用來裝右側的圖片。我真佩服我自己，這麼好的點子都能想得出來，正在沾沾自喜的自我陶醉中…

別忙，哦，天啦，如果這樣來裝圖片，我的三種滑鼠翻滾狀態如何實現？我們都應該知道，目前除了該死的IE6，其它的瀏覽器都支援li:hover偽類。然而要兼容各主流瀏覽器（這是我們的第8專案標喲，別忘了！），這種方法是行不通的。 IE6只能在A標籤上應用hover偽類，其它的標籤它可是一概不理！

既然IE6只能在A標籤上套用hover偽類，那麼我們要製作自適應的滑動門選單，就需要在結構上動手腳了，看來只能在A標籤中再加入一個標籤，那麼選單的結構就會變成下面這個樣子了。 （註：這兒就開始改變結構了，雖然我一直想極力避免這種情況的發生，但好像要達到要求，這個標籤是非加不可了。）

我們在A標籤中加入了一個span容器，它將文字內容包含起來了。現在有兩個標籤，可以裝兩張圖片了。我們將右側圖片放在A標籤的背景中並向右靠齊，將左側圖片放在SPAN標籤中並向左靠齊。這樣就能表現出一個完整的按鈕形狀。
還好，雖說多加了一個標籤，但它還不是完全無語。

好了，我們的準備工作都差不多了，該給菜單穿上新衣服了。

我們要做成自適應寬度的選單，那麼，我們就不能設定選單的寬度值，所以我們不能像平常製作一個水平的有固定寬度的選單的做法那樣，設定寬度，然後向左浮動。如果這樣的話，每個選單項目的寬度不同時，要分別定義每一項的寬度，那就必須給每個選單項目定義一個ID或CLASS,並且這種方式也不利後台程式的動態循環輸出。

我們需要的是像內聯元素一樣從左到右自動在一行內排列每個選單項，那麼我們就需要選單以內聯的方式表現出來，OK,我們就用display:inline吧，這是一個非常有用的屬性：它解析後的排列方式能達到我們的基本要求：在一行內從左到右自動排列標籤元素，每一項寬度可以不同。

如果用上面這種屬性真的能滿足我們需要了，就沒有下面這一段文字內容。
雖說這個屬性能滿足我們專案基本需要，可是它有一個非常致命的弱點：它不能設定寬度和高度值，不信你可以試試看。它只表現為文字的預設高度和寬度，超出這個寬高值後就自動隱藏了。這樣一來，我在這裡面是有背景圖片的，要表現出這個圖片效果，我們需要給定一個寬度和高度。這就不能做出我們的效果了，鬱悶！還好，還有一個屬性：display:inline-block;它的表現就是我們需要的。

但是…這個屬性也有致命弱點，它只能被FF3等高級瀏覽器辨識。其它的瀏覽器只能繞道而行了。啊哦！所以，統一瀏覽器標準是多麼的重要啊！看來，HACK也是我們逼不得已的一種解脫方式了。

還好，有高手早就找到解決之道了。請大家先看看這兩篇文章。

相關教學：
《display:inline-block的應用兩例》（秦歌）
《模擬相容性的inline-block 屬性》（懌飛）

原理我們都了解了，我們可以根據上面兩篇文章提供的技巧來做一個自適應的菜單了。

我們先寫右側圖片的樣式，它是應用在li元素的子節點A標籤中的。

li a{display:inline-block; padding-right:30px; padding-top:10px; *padding-top:0; padding-bottom:13px; *padding-bottom:0; height:36px; background:url(images /button.gif) no-repeat right -36px; text-decoration:none; font-size:12px; color:#fff;}

我們先設定display:inline-block,然後我們再用padding來撐開它的邊距，讓它有一定的空間來裝填圖片。注意，這裡的圖片路徑換成你自己的路徑。然後設定其它的樣式，如去掉下劃線，字體顏色，字體大小等等。設定圖片靠右對齊。

按鈕左側的圖片是放在SPAN元素中的，將它的圖片向左對齊，也設定padding來撐開它的寬度和高度。

然後將它們的又設定回inline內聯模式，觸發IE的haslayout特性。
在上面的程式碼，我們也看到有一個HACK的應用，*padding-bottom：0;和*padding-top：0;這用來解決IE與FF等瀏覽器不同效果的。不信刪除後看看會有什麼效果，在IE下高度伸展有問題。
好了下面該寫滑鼠移上時的效果了。

li a:hover{padding-right:30px;background:url(images/button.gif) no-repeat right -108px;}
li a:hover span{padding-left:30px;background:url(images/button.gif) no-repeat left -72px;font-weight:bold;}

再接下來是滑鼠點擊後的效果。

li a:active{padding-right:30px;background:url(images/button.gif) no-repeat right -180px;}
li a:active span{padding-left:30px;background:url(images/button.gif) no-repeat left -144px;font-weight:bold;}

ok,似乎大功告成，在不同瀏覽器下看看，似乎都能達到滿意的效果。

現在純CSS版的滑動門菜單基本上就完成了。