本文一步一步手把手教你打造一個(gè)極酷的三層分離的標(biāo)準(zhǔn)滑動(dòng)門導(dǎo)航菜單，從思路、原理、步驟，手段可謂“無所不用其極”，即便你是菜鳥，相信你看了本文后，也能打造出屬于自己的超級(jí)漂亮的標(biāo)準(zhǔn)導(dǎo)航菜單。

我們要做成自適應(yīng)寬度的菜單，那么，我們就不能設(shè)置菜單的寬度值，所以我們不能像平時(shí)制作一個(gè)水平的有固定寬度的菜單的做法那樣，設(shè)置寬度，然后向左浮動(dòng)。如果這樣的話，每個(gè)菜單項(xiàng)的寬度不同時(shí)，要分別定義每一項(xiàng)的寬度，那就必須給每個(gè)菜單項(xiàng)定義一個(gè)ID或CLASS,并且這種方式也不利后臺(tái)程序的動(dòng)態(tài)循環(huán)輸出。
我們需要的是像內(nèi)聯(lián)元素一樣從左到右自動(dòng)在一行內(nèi)排列每個(gè)菜單項(xiàng)，那么我們就需要菜單以內(nèi)聯(lián)的方式表現(xiàn)出來，OK,我們就用display:inline吧，這是一個(gè)非常有用的屬性：它解析后的排列方式能達(dá)到我們的基本要求：在一行內(nèi)從左到右自動(dòng)排列標(biāo)簽元素，每一項(xiàng)寬度可以不同。
如果用上面這種屬性真的能滿足我們需要了，就沒有下面這一段文字內(nèi)容。
雖說這個(gè)屬性能滿足我們項(xiàng)目基本需要，可是它有一個(gè)非常致命的弱點(diǎn)：它不能設(shè)置寬度和高度值，不信你可以試試。它只表現(xiàn)為文字的默認(rèn)高度和寬度，超出這個(gè)寬高值后就自動(dòng)隱藏了。這樣一來，我在這里面是有背景圖片的，要表現(xiàn)出這個(gè)圖片效果，我們需要給定一個(gè)寬度和高度。這就不能做出我們的效果了，郁悶！還好，還有一個(gè)屬性：display:inline-block;它的表現(xiàn)就是我們需要的。
但是…這個(gè)屬性也有致命弱點(diǎn)，它只能被FF3等高級(jí)瀏覽器識(shí)別。其它的瀏覽器只能繞道而行了。啊哦！所以，統(tǒng)一瀏覽器標(biāo)準(zhǔn)是多么的重要?。】磥?，HACK也是我們逼不得已的一種解脫方式了。
還好，有高手早就找到了解決之道了。請(qǐng)大家先看看這兩篇文章。
相關(guān)教程：
《display:inline-block的應(yīng)用兩例》（秦歌）
《模擬兼容性的 inline-block 屬性》（懌飛）
原理我們都了解了，我們可以根據(jù)上面兩篇文章提供的技巧來做一個(gè)自適應(yīng)的菜單了。
我們先寫右側(cè)圖片的樣式，它是應(yīng)用在li元素的子節(jié)點(diǎn)A標(biāo)簽中的。
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;}
我們先設(shè)置display:inline-block,然后我們?cè)儆胮adding來撐開它的邊距，讓它有一定的空間來裝填圖片。注意，這里的圖片路徑換成你自己的路徑。然后設(shè)置其它的樣式，如去掉下劃線，字體顏色，字體大小等等。設(shè)置圖片靠右對(duì)齊。
li a span{display:inline-block; padding-left:30px; padding-top:10px; *padding-top:0; padding-bottom:13px; padding-bottom:0; height:36px; line-height:36px; background:url(images/button.gif) no-repeat left top; font-weight:bold;}
按鈕左側(cè)的圖片是放在SPAN元素中的，將它的圖片向左對(duì)齊，也設(shè)置padding來撐開它的寬度和高度。
li a,li a span{display:inline;cursorointer;}
然后將它們的又設(shè)置回inline內(nèi)聯(lián)模式，觸發(fā)IE的haslayout特性。
在上面的代碼，我們還看到有一個(gè)HACK的應(yīng)用，*padding-bottom：0;和*padding-top：0;這用來解決IE與FF等瀏覽器不同效果的。不信你刪除后看看會(huì)有什么效果，在IE下高度伸展有問題。
好了下面該寫鼠標(biāo)移上時(shí)的效果了。
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;}
再接下來是鼠標(biāo)點(diǎn)擊后的效果。
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,似乎大功告成，在不同瀏覽器下看看，似乎都能達(dá)到滿意的效果。下面是截圖：

圖四
現(xiàn)在純CSS版的滑動(dòng)門菜單基本上就做好了。

最新評(píng)論