不规则背景图片滑动门

原创 2007年09月29日 09:53:00
     记得很久以前写过一个滑动门菜单的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实现背景图片不规则的导航菜单

一般情况下导航菜单的背景图片都是比较有规则的,但是平时我们也会遇到很多背景图片形状不规则导航条(比如但鼠标移上的时候,背景图片不规则,本例只讨论此种类型),如下图所示: (图一) 当鼠标移上去的时...

andorid最新的不规则色彩背景图片自适应屏幕宽高,背景不变形

先在这里吐槽一下万恶的客户改需求... 再说一句...网上大部份资料都是坑爹的.因为不是针对你需求来写的....别照抄..你只能从多种答案中总结出自己的代码.自己的方法 所谓不规则背景图片是指...

自定义TabHost实现背景图片随选项卡切换滑动效果

androidlayoutanimationimagelistdelaystring [html] view plaincopy strong>...

关于jQuery配合CSS3实现背景图片滑动实例

关于jQuery配合CSS3实现背景图片滑动实例

很大气的滑动门图片特效

很大气美观的滑动门图片特效,右侧显示标题,鼠标滑上去左侧的大图片就切换,可为图片增加描述和标题介绍,支持Alt标签和title标签,示例中可能去掉了这些,若需要的话自己再添加上去。本图片的流畅平滑效果...

jQuery实现Tab,滑动门,选项卡,图片切换

几个Tab,滑动门,选项卡,图片切换,在一个网页中实现了超多的常用效果,大家喜欢的滑动门,焦点图切换,标签选项卡以及文字轮番等都集中在了一起,无聊的功劳,忙的时候还顾不上写埃另外还加入了圆角,都是参考...
  • zyu67
  • zyu67
  • 2015年08月08日 16:15
  • 724

不同风格的Tab滑动门代码+图片

  • 2008年03月17日 11:32
  • 81KB
  • 下载

jQuery图片自动滑动门效果

  • 2014年05月07日 16:27
  • 367KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:不规则背景图片滑动门
举报原因:
原因补充:

(最多只允许输入30个字)