CSS滑动门菜单是什么意思如何实现？_Div+CSS教程

　　看到这一篇文章，想必你在学习CSS技术，CSS的含义你一定也不生疏：层叠样式表。我们需要注重样式的可层叠性。在以往的制作中，我们往往将导航菜单处理成直角的矩形，或者直接定义Border和Background的样式即完成了菜单的制作。难道我们只能这样了吗。我们需要制作出更加美观、实用、方便的菜单。

　　什么是滑动门技术？究其本意，就是根据文本自适应大小，进行滑动。我们可以用背景图片来营造这样的现象，一个在左一个在右，把这两个图片想象成可以滑动的门，当文本较少的时候，两个图片重叠的就多些，当文本较多的时候就滑动开，重叠的部分就少一些。我们看下面的图片示例。



　　在上在的图示中，左边的窄的门，遮住了右链的宽的门。我们主要想实现了是图片的圆弧部份。中间的区域大小可以根据文本的多少来自适应。假如文本少，侧距离就近，相重叠就多。假如文本多就撑开了两扇门，让区域变大。大家应该能理解这样的思维。

　　我们用象处理软件，制作了四个图片，以备用：









　　下面我们来动手制作这个滑动门菜单，大家跟我一起做。假如有疑问，欢迎来我的主页mb5u.com给我留言。

　　首先我们需要创建一个无序列表来放置菜单的内容。xhtml代码如下：


　　我们写相应的样式，使菜单能初步成形。CSS代码如下：


　　在上面的代码中，我们首先设置容器woaicss的大小就外边距、内边距。设置无序列表的上边距为20PX，左边距为18PX。并设置了列表标记为无。
　　列表元素li为左浮动，并设置了背景图片，请注重背景图片的对齐方式：无重复、居右、顶端对齐。
　　我们运行一下看看效果，得到了如下图所示的样子。



　　菜单的链接文字距离左右边距太近期了，滑动门的另一扇（左侧）还没有定义。我们继续后面的制作，在CSS文件中加入如下的代码：


　　我们定义li的链接区为块元素，设置背景图片，请注重背景图片的对齐方式：无重复、居左、顶端对齐。设置内边距：上下为零，左右为15PX。
　　我们运行一下看看效果，得到了如下图所示的样子。



　　至此，滑动门菜单的样子已经具备了，我们成功了实现了滑动门菜单的制作，但我们的菜单还不够美观，链接文字需要定义，需要制作链接菜单的“当前页”的样式。
　　我们继续制作，CSS代码如下：


　　链接文字进行了定义，并设置了hover效果。
　　设置类dang的样式。这是当前页的效果。背景图片的定义与上面所讨论的类似。

　　我们形成完整的代码，运行下面的代码看最终的CSS滑动门菜单制作：


　　滑动门菜单的制作打破了一种方方正正矩形菜单的模式，让我们的页面设计可以更加的灵活方便，不必拘泥于代码的局限，大家多做偿试.