在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。此刻展开按钮的行为面板如图：

　好，再次预览，一切正常！

　　至此，这个效果就算完成了，当然，大家完全可以自我发挥制作出更好的效果来，但是万变不离其宗，只要我们掌握好了时间轴配合动作行为的运用，所有的效果只是操作问题：）