飘零雾雨的专栏

欢迎到我的主博客:css探索之旅(http://blog.doyoe.com/)

不规则背景图片滑动门

     记得很久以前写过一个滑动门菜单的Demo,前些日子写了一种用越发不规则的图片做背景的滑动门菜单,但总有点瑕疵,因为会存在盲点区域,虽然范围很小,几乎可以忽略,但毕竟还是存在。先来看看演示再说。

      [演示地址:http://www.doyoe.com/model/xhtmlcss/menu/menu4/1.htm

CSS部分:

html,body {
 margin:0;
 font:12px "宋体";
}
.dymenu {
 padding:50px;
 overflow:hidden;
}
.dymenu a {
 margin-left:-21px;
 color:#050;
 line-height:22px;
 text-decoration:none;
 background:url(left.gif) left 0 no-repeat;
 float:left;
}
.dymenu a span {
 margin-left:21px;
 padding:0 31px 0 10px;
 background:url(right.gif) right 0 no-repeat;
 cursor:pointer;
 float:left;
}
.dymenu a:hover,.dymenu a.index {
 color:#444;
 background-position:left -23px;
}
.dymenu a:hover span,.dymenu a.index span {
 background-position:right -23px;
}

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Doyoe&#39;s Menu</title>
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
</head>
<body>
<div class="dymenu">
 <a href="#1" class="index"><span>Doyoe&#39;s Menu</span></a>
 <a href="#2"><span>About Me</span></a>
 <a href="#3"><span>Contact Me</span></a>
 <a href="#4"><span>I can adaptive width</span></a>
</div>
</body>
</html>

      上面的效果应该没什么问题吧 :) 呵呵,一直期望能够不会有问题,可问题就喜欢和你瞎纠缠。

      回到前面说的盲点区域上来,细心的你会发现除最后面的一个链接外,每个链接的右上角区域都会有一块鼠标无法点击的区域。虽说地方不大,但留着总是碍眼。

      有一个方法可以消除这块盲点,在测试的同学,可以给hover状态加一个zIndex:

.dymenu a:hover {
 position:relative;
 z-index:99;
 color:#444;
 background-position:left -23px;
}

      意思就是说hover状态的链接级别总是在别的链接之上,这样右上角的盲点区域自然就可以消除了。可这样,别的问题又来了,hover状态的链接会将下一个链接的左下角位置遮盖,这样又出现了除第一个链接之外的左下角盲点区域。

      真够折腾的,不知道哪位同学有消除这两个盲点区域的好方法,感谢留言:)

 
阅读更多
个人分类: CSS
上一篇避免和清除宽自适应布局在ie中产生几像素差异的方法
下一篇高固定情况下的水平及垂直居中
想对作者说点什么? 我来说一句

图片滑动门

2011年12月06日 118KB 下载

没有更多推荐了,返回首页

关闭
关闭