|
什么是滑动门技术？究其本意，就是根据文本自适应大小，进行滑动。我们可以用背景图片来营造这样的现象，一个在左一个在右，把这两个图片想象成可以滑动的门，当文本较少的时候，两个图片重叠的就多些，当文本较多的时候就滑动开，重叠的部分就少一些。我们看下面的图片示例。
在上在的图示中，左边的窄的门，遮住了右链的宽的门。我们主要想实现了是图片的圆弧部份。中间的区域大小可以根据文本的多少来自适应。如果文本少，侧距离就近，相重叠就多。如果文本多就撑开了两扇门，让区域变大。大家应该能理解这样的思维。
我们用象处理软件，制作了四个图片，以备用：
下面我们来动手制作这个滑动门菜单，大家跟我一起做。如果有疑问，欢迎来我的主页^xxcss.com给我留言。
首先我们需要创建一个无序列表来放置菜单的内容。xhtml代码如下：
Example Source Code [www.xxcss.com]
<div id="woaicss"> <ul> <li><a href="#">Div CSS</a></li> <li><a href="#">52CSS</a></li> <li class="dang"><a href="#">52CSS.com</a></li> <li><a href="#">CSS Web Design</a></li> <li><a href="#">CSS Layout Example</a></li> </ul> </div>
我们写相应的样式，使菜单能初步成形。CSS代码如下：
Example Source Code [www.xxcss.com]
#woaicss {
width:100%
margin:0;
padding:0;
}
#woaicss ul {
margin:20px 0 0 18px;
padding:0;
list-style:none;
white-space: nowrap;
}
#woaicss li {
float:left;
margin:0;
padding:0;
background:url(hm_4.jpg) no-repeat right top;
}
在上面的代码中，我们首先设置容器woaicss的大小就外边距、内边距。设置无序列表的上边距为20PX，左边距为18PX。并设置了列表标记为无。
列表元素li为左浮动，并设置了背景图片，请注意背景图片的对齐方式：无重复、居右、顶端对齐。
我们运行一下看看效果，得到了如下图所示的样子。
菜单的链接文字距离左右边距太近期了，滑动门的另一扇（左侧）还没有定义。我们继续后面的制作，在CSS文件中加入如下的代码：
Example Source Code [www.xxcss.com]
#woaicss li a {
display:block;
background:url(hm_3.jpg) no-repeat left top;
padding:0 15px;
}
#woaicss li a:hover {
color:#c00;
}
我们定义li的链接区为块元素，设置背景图片，请注意背景图片的对齐方式：无重复、居左、顶端对齐。设置内边距：上下为零，左右为15PX。
我们运行一下看看效果，得到了如下图所示的样子。
至此，滑动门菜单的样子已经具备了，我们成功了实现了滑动门菜单的制作，但我们的菜单还不够美观，链接文字需要定义，需要制作链接菜单的“当前页”的样式。
我们继续制作，CSS代码如下：
Example Source Code [www.xxcss.com]
#woaicss li a {
display:block;
background:url(hm_3.jpg) no-repeat left top;
padding:0 15px;
font-size:15px;
color:#000;
font-weight:800;
text-decoration:none;
}
#woaicss li a:hover {
color:#c00;
}
#woaicss li.dang {
background:url(hm_2.jpg) no-repeat right top;
}
#woaicss li.dang a {
background:url(hm_1.jpg) no-repeat left top;
color:#fff;
}
#woaicss li.dang a:hover {
color:#fc0;
}
链接文字进行了定义，并设置了hover效果。
设置类dang的样式。这是当前页的效果。背景图片的定义与上面所讨论的类似。
我们形成完整的代码，运行下面的代码看最终的CSS滑动门菜单制作：
Source Code to Run [www.xxcss.com]
滑动门菜单的制作打破了一种方方正正矩形菜单的模式，让我们的页面设计可以更加的灵活方便，不必拘泥于代码的局限，大家多做偿试，欢迎你来我的主页^xxcss.com与我交流。相信你能做出更加漂亮的效果。
|
