在CSS中，一個(gè)經(jīng)常被人們討論的先進(jìn)之處即背景圖像的可層疊性，并允許他們在彼此之上進(jìn)行滑動(dòng)，以創(chuàng)造一些特殊的效果。根據(jù)CSS2.0當(dāng)前的規(guī)定，每一個(gè)背景圖像都需要各自的HTML元素。在許多情況下，典型的標(biāo)記已經(jīng)為一般的接口組件提供了多種元素以供我們使用。

標(biāo)簽導(dǎo)航欄就是其中的一個(gè)例子。過去，我們頻繁的使用這些標(biāo)簽，并已成為了一種非常流行的站點(diǎn)導(dǎo)航方式。現(xiàn)今，在CSS已被廣泛支持的前景下，我們可以為我們站點(diǎn)制作出更高質(zhì)量和更好外觀的標(biāo)簽導(dǎo)航欄來。你也許知道CSS可以用來“馴服”無序的列表，或許你還曾經(jīng)看到過這種樣式的標(biāo)簽列表：

如果我們想用和以上類似的標(biāo)記，將導(dǎo)航標(biāo)簽變成這種樣式，該怎么辦呢？

經(jīng)過簡單的設(shè)計(jì)，我們是可以做到的。

創(chuàng)新于何處？

我見過的許多基于CSS的導(dǎo)航標(biāo)簽大都具有一類的特征：矩形的色塊，也許僅僅是一個(gè)輪廓，對于當(dāng)前選中的標(biāo)簽則沒有邊框，標(biāo)簽在鼠標(biāo)指針游至其上時(shí)改變顏色。這難道就是CSS所能給我們的全部嗎？一連串的小盒子和單調(diào)的色彩嗎?

在CSS被廣泛采用之前，我們已經(jīng)看到許多標(biāo)簽導(dǎo)航設(shè)計(jì)中的創(chuàng)新之處。獨(dú)創(chuàng)的外形，熟練的色彩混合，以及對真實(shí)世界中許多物理接口的模仿。但是這些設(shè)計(jì)往往過分依賴于經(jīng)過復(fù)雜制作、帶有文本的圖像，或被包裝成若干嵌套的表格。修改文本或改變標(biāo)簽的順序則需要一個(gè)復(fù)雜的過程。文本的伸縮更是不可能的，或給頁面的布局極大的影響。

純文本的導(dǎo)航欄比起文本即圖像的導(dǎo)航欄更具有持續(xù)使用性和更快的載入速度。同樣，我們甚至可以為每一個(gè)圖像加上alt屬性，對于弱視者，純文本更可以自由的改變大小。不足為奇的是，基于純文本的導(dǎo)航欄，并加以CSS樣式，又重新回到Web設(shè)計(jì)中來。但是，大多數(shù)基于CSS的導(dǎo)航欄設(shè)計(jì)，至今為止仍然是毫無意義的。一種最近被采用的技術(shù)（例如CSS）可以讓我們做的更好，同樣不失先前提到的那些表格和圖片標(biāo)簽的效果。

滑動(dòng)門技術(shù)

美觀的工藝，真正靈活的接口組件，并根據(jù)文本自適應(yīng)大小，我們可用兩個(gè)獨(dú)立的背景圖像來創(chuàng)造它。一個(gè)在左邊，一個(gè)在右邊。把這兩幅圖像想象成兩扇可滑動(dòng)的門，它們滑到一起并交迭，占據(jù)一個(gè)較窄的空間；或者相互滑開，占據(jù)一個(gè)較寬的空間，就像下圖所顯示的那樣：

在這個(gè)模型中,一個(gè)圖像掩蓋住另一個(gè)圖片的一部分。假設(shè)我們放置一些獨(dú)特的內(nèi)容在每個(gè)圖像的周圍，例如標(biāo)簽的圓角，我們并不希望上面一副圖像完全的遮蔽住下面一副。為了防止這種情況的發(fā)生，我們可以將上面一副圖像（此例中的左邊那幅）控制的盡可能的窄。但仍然要保證一定的寬度來顯現(xiàn)標(biāo)簽一側(cè)的獨(dú)特性。如果外部是圓角，我們就應(yīng)該控制上面一副圖像和它的弧線部分具有一樣的寬度。

如果目標(biāo)在大小上增長，并超過了以上所顯示的寬度，歸咎于文本大小及字體的改變，圖像會(huì)被拉開，產(chǎn)生不美觀的間隙。我們需要判斷的是，預(yù)測這種可擴(kuò)展的量將有多大。如果在瀏覽器中改變字體的大小，目標(biāo)又會(huì)如果增長呢？實(shí)際來說，我們至少應(yīng)該估算到字體大小增長至300%的情況。背景圖像也得適應(yīng)這種增長。對于以上的例子，我們將下面（即右邊）的圖像設(shè)為400*150像素，上面的設(shè)為9*150像素。

在頭腦中，始終要有這樣的認(rèn)識(shí)：背景圖像只是顯示一個(gè)可供內(nèi)容填充的有效空間（即內(nèi)容區(qū)域和padding，稱為doorway）。這兩幅圖像始終和各自外部的邊角相錨定。背景圖像的可見部分和在一起即形成了一個(gè)具有這種標(biāo)簽形狀的空間（doorway）：

如果標(biāo)簽被撐大，圖像即滑開，doorway變寬，圖像的也將被顯露的更多：

此例中，我在photoshop中制作兩個(gè)平滑，細(xì)的3D標(biāo)簽圖像，如文章開頭所顯示的那樣。對于其一，內(nèi)部明亮，邊框暗淡些，用來表現(xiàn)當(dāng)前選中的標(biāo)簽。將這種技巧模型應(yīng)用于左右兩幅圖像中，我們需要擴(kuò)大標(biāo)簽圖像覆蓋的區(qū)域，將它裁剪成兩部分：

同樣的方式將應(yīng)用到被稱為“當(dāng)前”的標(biāo)簽中。一旦我們完成了這四幅圖像（1, 2, 3, 4），我們就可以開始用標(biāo)記和CSS來制作我們的標(biāo)簽了。

#p#副標(biāo)題#e#

當(dāng)你在研究用CSS來創(chuàng)造水平列表時(shí)，會(huì)發(fā)現(xiàn)至少有兩種方法將列表項(xiàng)安排在同一行里。兩種方法各有千秋，但都需要CSS來解決布局所帶來的混亂。一種方法使用inline box，另一種則用floats。

方法一，可能是比較普遍的一種，是將列表項(xiàng)都inline顯示。inline方法的魅力在于它的簡易性。但是，對于我們即將談到的滑動(dòng)門技術(shù)來說，inline方法在特定的瀏覽器上存在一些解釋上問題。方法二，是我們將要關(guān)注的，即用floats將列表項(xiàng)安排在同一行里。令人沮喪的是，floats表面上矛盾的行為正巧回避了自然的邏輯。盡管如此，對于解決多重浮動(dòng)元素的基本認(rèn)識(shí)，以及可靠浮動(dòng)的意義，仍是值得討論的。

我們將用另一種浮動(dòng)元素來解決浮動(dòng)元素的排列問題。這樣，父類元素將子類元素完全包括起來。于是，我們就可以為標(biāo)簽加上背景色彩和背景圖像。非常重要的一點(diǎn)必須記住，緊跟在標(biāo)簽后的文本元素用CSS中的clear功能來清除浮動(dòng)對象。這樣避免了浮動(dòng)標(biāo)簽影響頁面上其它元素的位置。

我們從以下的標(biāo)記開始：

現(xiàn)實(shí)中，#header div可能同樣包含logo和搜索框。對于我們的例子，我們要縮短每一個(gè)錨鏈中超鏈接的值。顯然，這些值應(yīng)該正確的包含文件或者目錄的位置。

我們從定位#header容器開始設(shè)計(jì)列表。這樣確保了這個(gè)容器確確實(shí)實(shí)的充當(dāng)了容器的作用，以包容它內(nèi)部浮動(dòng)的列表項(xiàng)。既然元素是浮動(dòng)的，我們同樣需要聲明它的寬度為100%。加入臨時(shí)的黃色背景以確保父類容器完全填滿標(biāo)簽后面的整個(gè)區(qū)域。同樣，設(shè)定默認(rèn)的文本屬性，確保樣式的統(tǒng)一：

#header { float:left; width:100%; background:yellow; font-size:93%; line-height:normal; }

現(xiàn)在，我們同樣需要為無序列表設(shè)定默認(rèn)的margin/padding值為0，并去掉列表項(xiàng)前面的標(biāo)記。每個(gè)列表項(xiàng)左浮動(dòng)：

#header ul { margin:0; padding:0; list-style:none; }#header li { float:left; margin:0; padding:0; }

設(shè)定錨鏈強(qiáng)制作為塊對象呈遞，我們便可無憂的控制所有的樣式：

#header a { display:block; }

下一步，我們將右側(cè)的背景圖像加入到列表項(xiàng)中去（改變?nèi)?STRONG>粗體所示）：

#header li { float:left; background:url(“norm_right.gif”) no-repeat right top; margin:0; padding:0; }

在加入左側(cè)圖像之前，我們可以在效果1種看看目前為止的效果。（在效果中，忽略body中的規(guī)則。僅設(shè)定基本margin,padding,colors,text的屬性。）

—

現(xiàn)在我們可以將左側(cè)圖像放置在錨鏈的左邊（容器內(nèi)的元素）。我們同時(shí)加入padding，擴(kuò)大標(biāo)簽并將文本從標(biāo)簽的邊緣推開：

#header a { display:block; background:url(“norm_left.gif”) no-repeat left top; padding:5px 15px; }

這樣我們就得到了效果2。注意我們的標(biāo)簽是如何成型的。在這里，IE5/Mac的用戶會(huì)立刻驚奇道，“天啊，我的標(biāo)簽垂直堆在一起并且延伸至整個(gè)屏幕！”不要著急，我們馬上幫你解決。眼下，盡量按照下面去做，或者方便的話，臨時(shí)改換其他的瀏覽器，并且IE5/Mac版本的問題會(huì)馬上得到解決。

—

現(xiàn)在，一般標(biāo)簽的背景圖像已經(jīng)完成了，我們要為“當(dāng)前”標(biāo)簽更換圖像。我們通過對目標(biāo)列表項(xiàng)加入id=”current”和錨鏈來實(shí)現(xiàn)。既然不需要改變背景的其他外觀，圖像除外，我們就使用background-image的特性：

#header #current { background-image:url(“norm_right_on.gif”); }#header #current a { background-image:url(“norm_left_on.gif”); }

我們要在標(biāo)簽下添加一條邊框。但是，將邊框?qū)傩詰?yīng)用于父類的#header容器上，將不能解決“當(dāng)前”標(biāo)簽無需邊框的問題。于是我們制作新的帶有邊框的圖像以代替它。同樣，我們可以為它加入漸變效果：

我們將圖像放置到#header容器的背景中去（代替原有的黃色背景），將背景圖像移至到最下方，并為圖像上方留出的空白添加相應(yīng)的背景顏色。同時(shí)，去掉由body繼承下來的padding，為ul的上、左、右邊加進(jìn)10像素的padding：

#header { float:left; width:100%; background:#DAE0D2 url(“bg.gif”) repeat-x bottom; font-size:93%; line-height:normal; }#header ul { margin:0; padding:10px 10px 0; list-style:none; }

我們必須讓“當(dāng)前”標(biāo)簽覆蓋邊框，如下面提示的那樣。你也許會(huì)認(rèn)為我們將要把底部邊框加入到與其顏色相對應(yīng)的、#header背景圖像中去，然后將“當(dāng)前”標(biāo)簽的底部邊框顏色改為白色。但是，對于挑剔的觀察者，還是會(huì)發(fā)現(xiàn)一些細(xì)小的差別。于是，我們改變錨鏈的padding，為“當(dāng)前”標(biāo)簽創(chuàng)造出直角來，如下面放大的例子：

我們通過減少1像素普通錨鏈的底部padding值（5px-1px=4px）來實(shí)現(xiàn)，然后為“當(dāng)前”錨鏈補(bǔ)上減去的padding。

#header a { display:block; background:url(“norm_left.gif”) no-repeat left top; padding:5px 15px 4px; }#header #current a { background-image:url(“norm_left_on.gif”); padding-bottom:5px; }

經(jīng)過改變，底部邊框?qū)⒃谄胀?biāo)簽中出現(xiàn)，而在“當(dāng)前”標(biāo)簽中則隱藏了起來。于是，我們得到了效果3。

#p#副標(biāo)題#e#

敏銳的觀察者也許會(huì)在上一例注意到白色的標(biāo)簽角落。這些不透明的角用來防止下面的圖像透過上面的一副。理論上，我們可以嘗試使用部分背景圖像來適應(yīng)標(biāo)簽的背景。但是我們的標(biāo)簽會(huì)在高度上增長，嘗試通過移動(dòng)背景顏色，背景圖像就會(huì)相對變矮。代替的辦法是，改變圖像，將標(biāo)簽的角落設(shè)為透明。如果弧線是反鋸齒的，我們在其邊緣使用較平均的背景色彩。

現(xiàn)在，角落已經(jīng)變成透明色，左邊的圖像將透過右邊圖像的角落。為了補(bǔ)償，我們?yōu)楸韱雾?xiàng)加入和左邊圖像寬度相吻合的padding（9px）。既然已經(jīng)為表單項(xiàng)加入了padding，我們還需去掉同樣的寬度以達(dá)到文本的居中（15px-9px=6px）：

#header li { float:left; background:url(“right.gif”) no-repeat right top; margin:0; padding:0 0 0 9px; }#header a { display:block; background:url(“left.gif”) no-repeat left top; padding:5px 15px 4px 6px; }

仍未結(jié)束，因?yàn)榧尤肓?個(gè)像素的padding使左邊圖像與標(biāo)簽的左邊之間產(chǎn)生了一段空白。現(xiàn)在，左側(cè)與右側(cè)，可見“doorway”的邊緣接在一起，我們再不需要將左邊圖像保持在上方。于是，交換兩幅背景圖像的順序，相反過來。同樣交換“當(dāng)前”標(biāo)簽中使用的兩幅圖像：

#header li { float:left; background:url(“left.gif“) no-repeat left top; margin:0; padding:0 0 0 9px; }#header a, #header strong, #header span { display:block; background:url(“right.gif“) no-repeat right top; padding:5px 15px 4px 6px; }#header #current { background-image:url(“left_on.gif“); }#header #current a { background-image:url(“right_on.gif“); padding-bottom:5px; }

完成這些后，我們到達(dá)了效果4。要注意的是，透明的角落在標(biāo)簽的左側(cè)產(chǎn)生了一段不能點(diǎn)擊的無效區(qū)域。這個(gè)區(qū)域在文本以外，但仍然是可以察覺到的。在標(biāo)簽的兩邊都使用透明的圖像是沒有必要的。如果我們不希望產(chǎn)生這種無效的區(qū)域，那么我們必須使用在標(biāo)簽后面使用顏色，然后用這種顏色來代替標(biāo)簽角落的透明圖像。現(xiàn)在我們僅保持這種透明角落。

對于剩下的問題，我們將一次性完成全部的修改：加重標(biāo)簽文本，將普通標(biāo)簽中的文本改為棕色，“當(dāng)前”標(biāo)簽文本改為深灰色，去掉鏈接的下劃線，最后將懸停文本色彩改為同樣的深灰色。經(jīng)過一系列的改變，我們將看到目前為止的效果5。

一致性的解決

在效果2之后，我們公認(rèn)的一個(gè)問題就是在IE5/Mac瀏覽方式下，每個(gè)標(biāo)簽延伸并占據(jù)了整個(gè)瀏覽器的寬度，以致標(biāo)簽垂直的堆在了一起。這不是我們所希望的。

在大多數(shù)的瀏覽器中，浮動(dòng)一個(gè)元素會(huì)有收縮，收縮最小至它所包含內(nèi)容的大小。如果一個(gè)浮動(dòng)元素包含一幅圖像或其本身即圖像，便會(huì)收縮至圖像的寬度。如果僅僅包含文本，那么將會(huì)收縮至最長的，不可被頂開的那文本的寬度。

一個(gè)問題出現(xiàn)在IE5/Mac中的圖片中，當(dāng)一個(gè)auto-width的塊對象元素被插入到一個(gè)浮動(dòng)的元素中時(shí)。其他的瀏覽器仍舊將浮動(dòng)縮小至最小，而無視容器內(nèi)的塊對象元素。但I(xiàn)E5/Mac并不按照這種情況，相反它將浮動(dòng)和塊對象元素?cái)U(kuò)展至盡可能的寬度。為解決這個(gè)問題，我們將錨鏈同時(shí)浮動(dòng)起來，但僅僅對于IE5/Mac，以免放棄其他的瀏覽器。首先，我們?yōu)殄^鏈設(shè)定浮動(dòng)規(guī)則。然后，我們使用反斜杠注釋法來隱藏這種規(guī)則，讓它僅僅對IE5/Mac生效，而無視其他的瀏覽器：

#header a { float:left; display:block; background:url(“right.gif”) no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#765; }/* Commented Backslash Hack hides rule from IE5-Mac \*/#header a {float:none;}/* End IE5-Mac hack */

現(xiàn)在IE5/Mac瀏覽器將按我們所期望的那樣來顯示標(biāo)簽，看效果6。對于非IE5/Mac的瀏覽器什么都不需要改變。注意到IE5.0/Mac的一系列解釋上的bug在IE5.1中解決。因此，滑動(dòng)門技術(shù)在5.0版本中所遭遇的問題超出了hack的限度。既然升級到IE5.1/Mac已不成難題，OS 9 Macs/IE5.0的占有率應(yīng)逐漸縮減至很低。

舉一反三

我們剛剛演練了滑動(dòng)門技術(shù)，用純文本和無序列表來創(chuàng)造導(dǎo)航標(biāo)簽，加以少量的樣式。它的裝載速度快，具有可維持性，并且文本的大小可以在不破壞外觀的情況下進(jìn)行較大的伸縮。不必我們再重申在創(chuàng)造復(fù)雜樣式的導(dǎo)航欄中，滑動(dòng)門技術(shù)所表現(xiàn)出來的彈性了。

只有想不到，沒有做不到。最終效果向我們展示了一例，但我們設(shè)計(jì)不可能因此而被限定死。

在某些場合，標(biāo)簽不一定是對稱的。我很快就制作了這種標(biāo)簽的第二個(gè)版本，也有陰影3D的樣式，有角的邊緣，和具有特色的左邊部分。依據(jù)第二個(gè)版本，我們甚至可以交換左右兩幅圖像的位置。以這種細(xì)致的布局和靈巧的圖像控制，我們可以去掉按鈕的下邊框以便標(biāo)簽圖像更好的去適應(yīng)背景，如第三個(gè)版本所顯示的那樣。如果你的瀏覽器支持多個(gè)樣式表的切換，你甚至可以靠它在多個(gè)版本的導(dǎo)航欄之間自由切換。

仍有許多我們沒有提到的其他的效果。快速的提一下，我改變鼠標(biāo)懸停的文本色彩，但是真?zhèn)€圖像可以替換掉以創(chuàng)造出更有趣的變換效果。即使標(biāo)記中兩個(gè)嵌套的HTML元素，也可以用CSS來達(dá)到一些我們還未想到的效果。我們在此例中創(chuàng)造的僅僅是水平的標(biāo)簽欄，但滑動(dòng)門亦可應(yīng)用于許多其他的情形。閣下覺得如何呢？

　　TIPS：這里這么做的目的是為了給你要滑動(dòng)的圖層前面加一個(gè)擋板，只有當(dāng)點(diǎn)擊的時(shí)候圖層才從你的這個(gè)圖層下緩緩的滑動(dòng)出來。

　　現(xiàn)在開始，才正式進(jìn)入到我們今天要制作的滑動(dòng)菜單的制作過程中。

    1.現(xiàn)在讓我們再次重復(fù)上面的步驟5，再插入一個(gè)圖層layer4,設(shè)置圖層屬性為寬500 、150高，剛好是剛才layer2和layer3的高度之和，并將圖層layer4調(diào)整到另外兩個(gè)圖層下面。如圖：

　　然后我們點(diǎn)擊圖層layer2前面的眼睛讓他閉合，這樣可以讓我們看到它下面的圖層layer4.

    2.這時(shí)，我們點(diǎn)擊ALT + F9 打開時(shí)間軸面板，DW已經(jīng)為我們添加了默認(rèn)的時(shí)間軸Timeline1，然后，我們選中我們要滑動(dòng)的圖層layer4，在上面點(diǎn)擊右鍵，選擇 [添加到時(shí)間軸] 這時(shí)我們可以在時(shí)間軸面板中看到我們剛剛制定的圖層layer4，這說明，我們已經(jīng)添加成功了！

    3.然后我們點(diǎn)擊時(shí)間軸上的第15楨，將圖層layer4的屬性面板中的上邊距調(diào)整為150。到這里，一個(gè)能滑動(dòng)的圖層就算做好了，你可以拖動(dòng)時(shí)間軸上面的紅色方塊慢慢從1走向15，你就可以看到你的這個(gè)圖層慢慢的從layer2和layer3下面滑動(dòng)出來！

    4.好了，現(xiàn)在我們只需要給這個(gè)會(huì)滑動(dòng)的圖層layer4設(shè)置一個(gè)可以激活他的動(dòng)作就算over了：）這之前，我已經(jīng)在我添加的layer3上插入了一個(gè)表格，并為layer4設(shè)置了兩個(gè)按鈕。

    5.我們先設(shè)置激活滑動(dòng)圖層的動(dòng)作。選擇上展開這個(gè)按鈕，轉(zhuǎn)到行為面板，點(diǎn)擊在出來的菜單中選擇 [時(shí)間軸――播放時(shí)間軸] DW會(huì)彈出一個(gè)窗體，在上面的下拉菜單中選擇timeline1。

    然后在行為面板中確認(rèn)事件為onclick

    好了，到這里，你可以預(yù)覽一下，當(dāng)你點(diǎn)擊上展開按鈕時(shí)，你的圖層就會(huì)慢慢的從上而下滑動(dòng)出來！

    6.怎么樣，看到了吧：）我們再給圖層添加上一個(gè)簡單的關(guān)閉動(dòng)作，就是點(diǎn)擊關(guān)閉按鈕后圖層隱藏。選擇上關(guān)閉按鈕，轉(zhuǎn)到行為面板，點(diǎn)擊菜單中選擇 [顯示隱藏層] ，在跳出的窗體中選擇上layer4，然后點(diǎn)擊下面的隱藏按鈕，將其設(shè)置為隱藏，如圖：

    7.好了，再預(yù)覽一下，發(fā)現(xiàn)展開后點(diǎn)擊關(guān)閉圖層就沒有了：）不過，似乎有一個(gè)問題，再次點(diǎn)擊展開的時(shí)候，似乎沒什么反應(yīng)了，那是我們還有一個(gè)動(dòng)作沒有設(shè)置。

　　重復(fù)剛才的步驟5，選擇上展開按鈕，添加動(dòng)作 [時(shí)間軸――轉(zhuǎn)到時(shí)間軸楨] ，在跳出的窗體中的下拉菜單選擇timeline1，楨數(shù)添上1。

    好了，這次預(yù)覽發(fā)現(xiàn)這個(gè)問題解決了。但是我們似乎還是忽略了一個(gè)問題，點(diǎn)擊關(guān)閉后這個(gè)圖層被設(shè)置為隱藏了，再點(diǎn)擊展開也沒反應(yīng)了。還是運(yùn)用老辦法，給展開按鈕添加一個(gè)動(dòng)作就可以解決了！

    8.重復(fù)步驟5，選擇 [顯示隱藏層] ，和剛才步驟6相反，這次我們選擇顯示，確定后，保證行為面板中顯示隱藏圖層的時(shí)間都是onclick。此刻展開按鈕的行為面板如圖：

　好，再次預(yù)覽，一切正常！

　　至此，這個(gè)效果就算完成了，當(dāng)然，大家完全可以自我發(fā)揮制作出更好的效果來，但是萬變不離其宗，只要我們掌握好了時(shí)間軸配合動(dòng)作行為的運(yùn)用，所有的效果只是操作問題：）