“滑动门”的版本间的差异

2009-02-18T09:14:16的版本

滑动门是一种利用CSS来控制自适应导航栏外观的一种技术。

滑动门使用最频繁的地方是导航栏。其实，当一个容器中的文字数量不定的时候，而需要背景自动反映这一变化，都可以考虑使用滑动门。

当满足以下条件，则可能需要使用到滑动门技术：

1. 导航边框样式为非矩形，或者导航栏背景图片有阴影等装饰性效果。
2. 在未知文字数量的情况下，导航栏自动适应宽度。

在制作滑动门以前，您需要斟酌到底能不能用低成本的方法实现。不是所有的效果图上的自适应导航都能用滑动门来实现。壁如，当效果图上的文字使用了特殊效果（阴影，浮雕，外发光等等），因为无法通过修改xhtml中的文字,来达到修改图片上文字，因此，滑动门在这种情况下并不适用。

滑动门范例

• http://www.w3cn.org/article/translate/2005/112.html CSS中的滑动门技术（未考虑:hover）
• http://veerle.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs/ 一款简洁的导航
• http://demo.rexsong.com/200705/css_background_menus/ 滑动门效果（23例）

滑动门与Tab选项卡

很多新手接触滑动门的时候，经常与Tab选项卡混为一谈。请记住，在某些情况下，Tab选项卡可能会使用滑动门技术，因为一组Tab选项卡看起来和导航非常类似。滑动门主要是靠控制CSS的各种属性实现的。而Tab选项卡主要是靠书写JavaScript脚本来实现的，尽管有时候需要使用滑动门技术来改变其外观。

滑动门的某些缺点

滑动门频繁出现的场合是导航栏，而导航栏是一组链接集。 某些时候，为了增强导航栏的交互表现，我们会使用伪类:hover来对链接做一些小小的改变，以强调鼠标指针已经移上这一事实。这种改变一般体现在文字的颜色、背景、下划线上。

当背景图需要改变的时候，除了要在背景图上做一些改变，还需要添加额外的标签。这种情况一般出现在，链接的左右部分都为圆角或其它形状。在CSS2.1规范中，一个容器只能定义一副背景图片，这就决定了滑动门对待:hover上的局限性，但我们可以通过添加额外标签来解决，或使用JavaScript来实现。

在CSS3的草案中，W3C相关工作小组已经在为CSS多重背景图而努力，因此在未来，就不需要再使用这些额外的标签。

使用滑动门需要注意的地方

因为滑动门技术是一定牵涉到图片的，因此您要考虑以下问题：

1. 如果背景图片为深色，文字为白色。当背景图片加载缓慢的时候，用户可能看见白色背景上的白色文字，这是影响阅读效率的，因此建议加背景色。
2. 如果对于页面加载速度要求苛刻，您应该尽可能将平时和:hover时的背景图融合到一副背景图上，而使用background-position来定位，这样以减少请求次数。