大家应该还记得在导航的设计中，我们使用图片翻转技术，使导航最终采用了带圆馋的图片背景，并实现了交互效果。但是在当时编码条件下，我们只能够做到使用同一个背景进行设计，并没有实现根据导航文字的长度，自由变化的圆角导航标签，我们使用了九宫格方式实现了可任意扩展的圆角样式，我们完全可以使用相同方式来改进导航系统，使其能够左右自由的伸展，提高及适应性。
使导航标签能够左右伸展，在CSS布局开始普及之时是众多设计师一直在尝试新技术，最终大家使用一些对象的组合完成了这个效果，并给了一个名字称之为滑动、(Sliding Doors)。正如其名称一样，标签像一个滑动门一样，天津网站建设，天津网站制作，天津做网站，天津网站优化，左右的圆角图片能够根据中间内容的大小左右自由滑动。
在考虑使用这种左右可扩展的滑动门技术时，可以先根据九宫格方式了解一下最终的滑动方式。九宫格使用4个图片的模式，原因在于为了上下左右4个边都可1以自由扩展，而对于导航标签来说只需要左右两个方向 1的扩展即可，因此按此原理我们的结构应当如右图。
类似于此的结构需要准备三张图片，A和c为标签二边，B为标签的背景。当前ⅪITML代码中，对象只能够使用一张图片，因此如果使用类似于九宮格r方式的话，需要3个对象进行嵌套完成，似乎过于复杂。A不过可以进一步优化这样的结构，使用二层嵌套完成，因为B和C或着A和B，都可以合在一起，使B部分延续得较长一些，因此最终的滑动门结构应当如左图。这样，我们就可以开始改进导航Ⅺ刪l代码，为了保证具有鼠标交互效果，我们必须将所有图片都放置在a对象之中，这样才可以应用样式，而且为了放置一张图片必须有两个对象。
可以看到当导航文字变长之后，导航的外观保持不变，而且鼠标移上去同样背景图片会发生变化。滑动门技术是基于九宮格方式的一种简化应用，在思考滑动门技术时，通过增加span使得a对象能够放置二张图片，最终的效果达到了文本可以横向任慈延长，当然，背景可接受的范围之内，在这里背景图片长度设为了150px，在实际使用中可以设置的更长一些。滑动门技术不仅可以应用于导航，也是一种横向可扩展粹式的基础模型，可以在此基础上加以改进，制作横向扩展的视觉效果。