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

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

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

經過簡單的設計，我們是可以做到的。

創新于何處？

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

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

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

滑動門技術

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

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

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

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

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

此例中，我在photoshop中制作兩個平滑，細的3D標簽圖像，如文章開頭所顯示的那樣。對于其一，內部明亮，邊框暗淡些，用來表現當前選中的標簽。將這種技巧模型應用于左右兩幅圖像中，我們需要擴大標簽圖像覆蓋的區域，將它裁剪成兩部分：

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

　　TIPS：這里這么做的目的是為了給你要滑動的圖層前面加一個擋板，只有當點擊的時候圖層才從你的這個圖層下緩緩的滑動出來。

　　現在開始，才正式進入到我們今天要制作的滑動菜單的制作過程中。

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

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

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

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

    4.好了，現在我們只需要給這個會滑動的圖層layer4設置一個可以激活他的動作就算over了：）這之前，我已經在我添加的layer3上插入了一個表格，并為layer4設置了兩個按鈕。

    5.我們先設置激活滑動圖層的動作。選擇上展開這個按鈕，轉到行為面板，點擊在出來的菜單中選擇 [時間軸――播放時間軸] DW會彈出一個窗體，在上面的下拉菜單中選擇timeline1。

    然后在行為面板中確認事件為onclick

    好了，到這里，你可以預覽一下，當你點擊上展開按鈕時，你的圖層就會慢慢的從上而下滑動出來！

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

    7.好了，再預覽一下，發現展開后點擊關閉圖層就沒有了：）不過，似乎有一個問題，再次點擊展開的時候，似乎沒什么反應了，那是我們還有一個動作沒有設置。

　　重復剛才的步驟5，選擇上展開按鈕，添加動作 [時間軸――轉到時間軸楨] ，在跳出的窗體中的下拉菜單選擇timeline1，楨數添上1。

    好了，這次預覽發現這個問題解決了。但是我們似乎還是忽略了一個問題，點擊關閉后這個圖層被設置為隱藏了，再點擊展開也沒反應了。還是運用老辦法，給展開按鈕添加一個動作就可以解決了！

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

　好，再次預覽，一切正常！

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