上一篇
下一篇
不规则背景图片滑动门
作者:飘零雾雨 日期:2007-07-26
转载请注明出处，css探索之旅-飘零雾雨的庄园，本文已作修改，如在修改前转载的麻烦更新。
记得很久以前写过一个完整点击区域的滑动门菜单，前些日子写了一种用越发不规则的图片做背景的滑动门菜单，但总有点瑕疵，因为会存在盲点区域，虽然范围很小，几乎可以忽略，但毕竟还是存在。先来看看演示再说。
［不规则背景图片滑动门演示：http://www.doyoe.com/model/xhtmlcss/menu/menu4/1.htm］
CSS部分：
.dymenu{
overflow:hidden;
height:22px;
padding-left:22px;
}
.dymenu a,.dymenu a span{
float:left;
height:22px;
background:url(tab.png) no-repeat;
}
.dymenu a{
margin-left:-22px;
}
.dymenu a span{
background-position:right -22px;
cursor:pointer;
}
.dymenu a span span{
margin:0 22px;
background-position:center -44px;
background-repeat:repeat-x;
color:#444;
}
.dymenu a:hover,.dymenu a.on{
background-position:0 -66px;
}
.dymenu a:hover span,.dymenu a.on span{
background-position:right -88px;
}
.dymenu a:hover span span,.dymenu a.on span span{
background-position:center -110px;
color:#050;
}
XHTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>不规则背景图片滑动门菜单 - Powered by 飘零雾雨</title>
<meta name="description" content="这是一个不规则背景图片滑动门菜单" />
<meta name="keywords" content="滑动门, 菜单" />
<meta name="author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
</head>
<body>
<div class="dymenu">
<a href="?" class="on"><span><span>Doyoe's Menu</span></span></a>
<a href="?"><span><span>About Me</span></span></a>
<a href="?"><span><span>Contact me</span></span></a>
<a href="?"><span><span>I can adaptive width</span></span></a>
</div>
</body>
</html>
上面的效果应该没什么问题吧 ：） 呵呵，一直期望能够不会有问题，可问题就喜欢和你瞎纠缠。
回到前面说的盲点区域上来，细心的你会发现除最后面的一个链接外，每个链接的右上角区域都会有一块鼠标无法点击的区域。虽说地方不大，但留着总是碍眼。
有一个方法可以消除这块盲点，在测试的同学，可以给hover状态加一个z-index：
.dymenu a:hover {
position:relative;
z-index:99;
}
意思就是说hover状态的链接级别总是在别的链接之上，这样右上角的盲点区域自然就可以消除了。可这样，别的问题又来了，hover状态的链接会将下一个链接的左下角位置遮盖，这样又出现了除第一个链接之外的左下角盲点区域。
真够折腾的，不知道哪位同学有消除这两个盲点区域的好方法，感谢留言：）
文章来自: 
引用通告: 
Tags: 
回复
kendyjack[2009-05-05 03:13 PM | 
]
飘零雾雨 于 2009-05-05 04:20 PM 回复