上一篇
下一篇
DEMO：内容自适应、有层叠效果的滑动门实现
作者:SMbey0nd 日期:2008-08-30
前几天在CSS森林群中讨论问题时，遇到一位朋友提出的内容自适应的层叠式菜单（滑动门）问题，当时想得很简单，以为简单切图即可，随后发现自己的低级错误。由于以前还没有实际的项目做过这种菜单，故实际制作一例DEMO并附上解决思路，深刻地熟悉一下其中的特点。
====================滑动的分隔线(*^__^*) ====================
要实现的效果如下（设计水平不行了，别笑话咱
）：
默认时，各个菜单分别向前遮挡；悬停时，当前菜单需要移动到最上层并替换图像。
HTML部分：
1.第一次考虑的思路（失败方案）：
程序代码li中放置向右对齐平铺的滑动背景（简称身体层），a中放置左侧不重复背景（简称头部层），由于a在li中，优先级高，其头部层将盖住身体层。因为头部层需要用透明png图片，为避免身体层透过来，头部层要向左移动一段距离，与身体层保持距离。接下来开始思考hover的时候，发现这种结构不能实现hover后的效果，因为身体层在a的外面，IE6下无法使用a:hover伪类替换图像。故考虑加入span标签来完成。
2.第二次考虑的思路（最终方案）：
程序代码把span作为头部层放在a中，a换作身体层（li被架空了 ，残念），这样就可以通过a:hover来控制头部和身体，让他们同时……替换图片了^^#。另外，菜单在悬停之后，需要设置z-index来使它们显示在同类的最上层。
CSS部分：
程序代码因为要实现宽度自适应，故所有标签均不要定义宽度。图片使用8位png可较好的实现圆角透明效果。最终图片尽量做成Sprite方式，这样菜单的性能更好：D
Images部分：
这就是用来做Sprite的图了。
OK。最终整理一下，运行看看效果：
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
以下是完整的DEMO演示地址：
http://www.smbey0nd.com/Demo/20080830/sliding_doors.html
====================滑动的分隔线(*^__^*) ====================
实现这种滑动门的关键之处在于，由于IE6不支持a之外的hover伪类，所以悬停的效果只能在a中做文章。CSS选择器在a:hover后选择span可以很好的解决这个问题。position:relative和z-index也是需要注意的地方。
btw:很可惜，由于relative的问题，本Demo不能进行float:center的居中模拟:(，不得不算做一个小瑕疵吧。
====================滑动的分隔线(*^__^*) ====================
要实现的效果如下（设计水平不行了，别笑话咱
）：默认时，各个菜单分别向前遮挡；悬停时，当前菜单需要移动到最上层并替换图像。
HTML部分：
1.第一次考虑的思路（失败方案）：
程序代码<ul>
<li><a /></li>
</ul>
<li><a /></li>
</ul>
2.第二次考虑的思路（最终方案）：
程序代码<ul>
<li><a><span>标题1</span></a></li>
</ul>
<li><a><span>标题1</span></a></li>
</ul>
，残念），这样就可以通过a:hover来控制头部和身体，让他们同时……替换图片了^^#。另外，菜单在悬停之后，需要设置z-index来使它们显示在同类的最上层。CSS部分：
程序代码ul li{float:left;}
ul li a{display:block;height:30px;float:left;color:#FFF;background:url(img1);}
ul li a span{display:block;height:30px;float:left;position:relative;left:-10px;background:url(img2);} /*用relative向左10像素使菜单头部与身体衔接，同时向左覆盖前一个菜单并露出本菜单尾部*/
ul li a:hover{height:55px;line-height:55px;position:relative;top:-25px;z-index:100;background:url(img3);} /*用relative向上25像素使hover后的菜单模拟"底部对齐"*/
ul li a:hover span{height:55px;background:url(img4);} /*hover后+span的选择器，用来替换头部层span的图像*/
ul li a{display:block;height:30px;float:left;color:#FFF;background:url(img1);}
ul li a span{display:block;height:30px;float:left;position:relative;left:-10px;background:url(img2);} /*用relative向左10像素使菜单头部与身体衔接，同时向左覆盖前一个菜单并露出本菜单尾部*/
ul li a:hover{height:55px;line-height:55px;position:relative;top:-25px;z-index:100;background:url(img3);} /*用relative向上25像素使hover后的菜单模拟"底部对齐"*/
ul li a:hover span{height:55px;background:url(img4);} /*hover后+span的选择器，用来替换头部层span的图像*/
Images部分：
这就是用来做Sprite的图了。
OK。最终整理一下，运行看看效果：
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
以下是完整的DEMO演示地址：
http://www.smbey0nd.com/Demo/20080830/sliding_doors.html
====================滑动的分隔线(*^__^*) ====================
实现这种滑动门的关键之处在于，由于IE6不支持a之外的hover伪类，所以悬停的效果只能在a中做文章。CSS选择器在a:hover后选择span可以很好的解决这个问题。position:relative和z-index也是需要注意的地方。
btw:很可惜，由于relative的问题，本Demo不能进行float:center的居中模拟:(，不得不算做一个小瑕疵吧。
文章来自: 
引用通告: 
Tags: 评论: 2 | 引用: 0 | 查看次数: -
看了很久.我开始把span的-10px去掉.以为会出现两个圆角 .原来错了,为这个想了半天 是我太笨呢,还是基础不杂实
btw:很可惜，由于relative的问题，本Demo不能进行float:center的居中模拟:(，不得不算做一个小瑕疵吧。
就是 right过去.left过来的那个么.
div {width:xxx; margin:0 auto;}也行么,挺好的,学到了,谢谢.smbey0nd是个好人
btw:很可惜，由于relative的问题，本Demo不能进行float:center的居中模拟:(，不得不算做一个小瑕疵吧。
就是 right过去.left过来的那个么.
div {width:xxx; margin:0 auto;}也行么,挺好的,学到了,谢谢.smbey0nd是个好人
发表评论
btw:很可惜，由于relative的问题，本Demo不能进行float:center的居中模拟:(，不得不算做一个小瑕疵吧。
就是 right过去.left过来的那个么.
div {width:xxx; margin:0 auto;}也行么,挺好的,学到了,谢谢.smbey0nd是个好人
承蒙厚爱……
嗯，没错，局中模拟就是你说的right过去left回来的那个，macjj发明的那个：）