|
我們要做成自適應(yīng)寬度的菜單，那么，我們就不能設(shè)置菜單的寬度值，所以我們不能像平時制作一個水平的有固定寬度的菜單的做法那樣，設(shè)置寬度，然后向左浮動。如果這樣的話，每個菜單項的寬度不同時，要分別定義每一項的寬度，那就必須給每個菜單項定義一個ID或CLASS,并且這種方式也不利后臺程序的動態(tài)循環(huán)輸出。
我們需要的是像內(nèi)聯(lián)元素一樣從左到右自動在一行內(nèi)排列每個菜單項，那么我們就需要菜單以內(nèi)聯(lián)的方式表現(xiàn)出來，OK,我們就用display:inline吧，這是一個非常有用的屬性：它解析后的排列方式能達到我們的基本要求：在一行內(nèi)從左到右自動排列標簽元素，每一項寬度可以不同。
如果用上面這種屬性真的能滿足我們需要了，就沒有下面這一段文字內(nèi)容。
雖說這個屬性能滿足我們項目基本需要，可是它有一個非常致命的弱點：它不能設(shè)置寬度和高度值，不信你可以試試。它只表現(xiàn)為文字的默認高度和寬度，超出這個寬高值后就自動隱藏了。這樣一來，我在這里面是有背景圖片的，要表現(xiàn)出這個圖片效果，我們需要給定一個寬度和高度。這就不能做出我們的效果了，郁悶！還好，還有一個屬性：display:inline-block;它的表現(xiàn)就是我們需要的。
但是…這個屬性也有致命弱點，它只能被FF3等高級瀏覽器識別。其它的瀏覽器只能繞道而行了。啊哦！所以，統(tǒng)一瀏覽器標準是多么的重要啊！看來，HACK也是我們逼不得已的一種解脫方式了。
還好，有高手早就找到了解決之道了。請大家先看看這兩篇文章。
相關(guān)教程：
《display:inline-block的應(yīng)用兩例》（秦歌）
《模擬兼容性的 inline-block 屬性》（懌飛）
原理我們都了解了，我們可以根據(jù)上面兩篇文章提供的技巧來做一個自適應(yīng)的菜單了。
我們先寫右側(cè)圖片的樣式，它是應(yīng)用在li元素的子節(jié)點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;}
我們先設(shè)置display:inline-block,然后我們再用padding來撐開它的邊距，讓它有一定的空間來裝填圖片。注意，這里的圖片路徑換成你自己的路徑。然后設(shè)置其它的樣式，如去掉下劃線，字體顏色，字體大小等等。設(shè)置圖片靠右對齊。
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元素中的，將它的圖片向左對齊，也設(shè)置padding來撐開它的寬度和高度。
li a,li a span{display:inline;cursorointer;}
然后將它們的又設(shè)置回inline內(nèi)聯(lián)模式，觸發(fā)IE的haslayout特性。
在上面的代碼，我們還看到有一個HACK的應(yīng)用，*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,似乎大功告成，在不同瀏覽器下看看，似乎都能達到滿意的效果。下面是截圖：
圖四
現(xiàn)在純CSS版的滑動門菜單基本上就做好了。
出處：藍色理想
責任編輯：bluehearts
上一頁 手工打造分離式滑動門導航菜單 [2] 下一頁 手工打造分離式滑動門導航菜單 [4]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 手工打造分離式滑動門導航菜單 [2]
