本文一步一步手把手教你打造一個極酷的三層分離的標(biāo)準(zhǔn)滑動門導(dǎo)航菜單，從思路、原理、步驟，手段可謂“無所不用其極”，即便你是菜鳥，相信你看了本文后，也能打造出屬于自己的超級漂亮的標(biāo)準(zhǔn)導(dǎo)航菜單。
樣式篇
好吧，它現(xiàn)在還只是一個骨架，我們稍微給它美化一下，加點簡單的樣式，至少應(yīng)該去掉小圓點吧，并且讓它水平排列吧！
好，加點樣式吧！
*{margin:0;padding:0;}/*將它統(tǒng)一成一個模樣吧，不然在各個瀏覽器下，會死得很難看*/
ul{list-style:none}/*去掉小圓點吧*/
li{float:left;margin-left:10px;}/*水平排列并來點間距吧，不要把我擠得太緊了。*/
嗯，現(xiàn)在看看，達到小目標(biāo)了。
骨架有了，接下來就是給每個菜單項穿上漂亮的衣裳。
要滿足第一項要求，首先要有一個漂亮的按鈕，自已畫一個，哦，我不是美術(shù)人員，難！不過，別恢心，網(wǎng)絡(luò)之大，無奇不有，說不定人家已經(jīng)有做好的，google一下，還真發(fā)現(xiàn)了一個，感謝啊！
有了設(shè)計好的按鈕源碼，省去設(shè)計的一環(huán)，真好。但要做成三態(tài)按鈕，還需要我們改造一下這個按鈕。看到第七條目標(biāo)了嗎，我們是要做自適應(yīng)的按鈕，所以要對這個按鈕做一些加工處理。
我們將這三個按鈕分別表現(xiàn)為鼠標(biāo)移開、點擊后、鼠標(biāo)移上時的三種狀態(tài)，要做滑動門菜單，需要將一個按鈕從中間剖開，左邊圖處放在左側(cè)，右邊圖片放在右側(cè)。要適應(yīng)文字加長的情況，還要將這個圖層寬度拉長一點，但這個圖片有很復(fù)雜的陰影特效，不能隨便拉伸，否則效果就不像了。我們就從中間給它剖開，將右邊圖片的左側(cè)向前平輔拉伸。如圖二所示

圖一
所以我們先將它如圖哪樣切成六片，然后將這六張圖片合并在一起。為什么要這樣呢？看看css sprites原理吧！這里就不詳述了，可以看我另一篇文章《制作一幅撲克牌系列一---css sprites圖片背景優(yōu)化技術(shù)》

圖二
上圖中第一和第二個圖片組成普通菜單樣式（默認樣式），第三、第四個圖片組成翻滾樣式，第五和第六個圖片組成點擊后的菜單項樣式。
我們將陰影圖片專門提取出來，作成一張很小的背景圖片。

圖三
該要的圖形都準(zhǔn)備好了，接下來，我們將這個圖片加在菜單項上吧。一個按鈕要用到兩張圖片才能表現(xiàn)出來。地球人都知道，一個html標(biāo)簽只能裝一張圖片（如果你發(fā)現(xiàn)一個標(biāo)簽?zāi)苎b上兩張圖片，請及時告訴我，我請你吃飯！）。哦！我的菜單結(jié)構(gòu)中每一項剛好有兩個標(biāo)簽，一個是li，它里面有一個A標(biāo)簽，剛好可以用來裝左右兩張圖片。Li用來裝左側(cè)的圖片，A用來裝右側(cè)的圖片。我真佩服我自己，這么好的點子都能想得出來，正在沾沾自喜的自我陶醉中…
別忙，哦，天啦，如果這樣來裝圖片，我的三種鼠標(biāo)翻滾狀態(tài)如何實現(xiàn)？我們都應(yīng)該知道，目前除了該死的IE6，其它的瀏覽器都支持li:hover偽類。然而要兼容各主流瀏覽器（這是我們的第8項目標(biāo)喲，別忘了?。?，這種方法是行不通的。IE6只能在A標(biāo)簽上應(yīng)用hover偽類，其它的標(biāo)簽它可是一概不理！
既然IE6只能在A標(biāo)簽上應(yīng)用hover偽類，那么我們要制作自適應(yīng)的滑動門菜單，就需要在結(jié)構(gòu)上動手腳了，看來只能在A標(biāo)簽中再加入一個標(biāo)簽，那么菜單的結(jié)構(gòu)就會變成下面這個樣子了。（注意：這兒就開始改變結(jié)構(gòu)了，雖然我一直想極力避免這種情況的發(fā)生，但好像要達到要求，這個標(biāo)簽是非加不可了。）
<li><a href="#none" title="冰極峰"><span>冰極峰</span></a></li>
我們在A標(biāo)簽中加入了一個span容器，它將文字內(nèi)容包括起來了。現(xiàn)在有兩個標(biāo)簽，可以裝兩張圖片了。我們將右側(cè)圖片放在A標(biāo)簽的背景中并向右靠齊，將左側(cè)圖片放在SPAN標(biāo)簽中并向左靠齊。這樣就能表現(xiàn)出一個完整的按鈕形狀。
還好，雖說多加了一個標(biāo)簽，但它還不是完全無語義。
好了，我們的準(zhǔn)備工作都差不多了，該給菜單穿上新衣服了。

最新評論