不规则背景图片滑动门

原创 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状态的链接会将下一个链接的左下角位置遮盖,这样又出现了除第一个链接之外的左下角盲点区域。

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

 

C# 实现图片为背景的不规则窗体

using System; using System.Drawing; using System.Drawing.Drawing2D; using System.Windows.Forms; ...
  • yeqi3000
  • yeqi3000
  • 2012年03月08日 10:09
  • 1131

CSS"滑动门"技术

网站的导航条对网站来说举足轻重,导航条的风格各式各样,纯文本的导航栏比起图像导航栏更具有适用性和快速载入的特点,但在硬件和软件飞速进步以及个性彰显的今天,普通简单的导航条已经显得捉襟见肘了,这样的导航...
  • lixinyang1991
  • lixinyang1991
  • 2013年01月05日 11:52
  • 1938

自定义dialog样式,背景不规则形式

可以自定义一个dialog,也可以直接采用new dialog形式实现 图例: public class AlertDialogView extends Dialog { public A...
  • louyxlovess
  • louyxlovess
  • 2017年04月21日 11:17
  • 801

简单滑动门js代码

代码如下学习点 立即调用的函数表达式 //使用立即调用的函数表答式,为了获得不同的i值 for(i=0;i...
  • chenshu0
  • chenshu0
  • 2016年11月28日 15:45
  • 167

HTML中的滑动门实现

http://www.alistapart.com/articles/slidingdoors/中文翻译http://www.cnwebshow.com/9/10/0601/3635.htm...
  • black_ben
  • black_ben
  • 2006年02月09日 11:55
  • 1320

javascript滑动门的实现方法和案例

首先我们知道js滑动门的三种实现思路: -自定义方法 -闭包 -自定义属性 那么写个列子分析一下各自的好坏。demo地址:http://codepen.io/tianzi77/pen/jPMP...
  • u011263845
  • u011263845
  • 2015年05月20日 21:44
  • 931

滑动门技术制作不规则按钮

有时候美工脑残的设计了不规则的按钮或边框等,做网页的都知道那玩意实现起来很麻烦,美不美观也是因人而异 这次有个美工做了这么个按钮给我,我日他先人先,因为项目要国际化所以里面的文字是变化的不能用图片只...
  • del1214
  • del1214
  • 2011年09月11日 19:41
  • 1822

css滑动门技术的一些归纳

前些天加了一个设计群,里面一帮人都在嚷嚷要学css,但是不知道从哪里入手,于是我就在群里随便嘀咕了一句"哈哈,我是高手...." 结果引来骂声无数,虽然我心里不服,不过还是承认自己的css功底不够,除...
  • merak_wuyj
  • merak_wuyj
  • 2006年11月06日 18:33
  • 1629

JQuery实现漂亮的滑动门效果

       今天继续学习了JQuery,老师给我们讲解了滑动门,我仿照网易的滑动门写了个类似的效果。呵呵,时间不早了,废话也不多说了。为了开发快速,我使用的是vs2005,现在写下来也一切从简。De...
  • hikevin17
  • hikevin17
  • 2010年09月28日 22:33
  • 1139

CSS滑动门特性

原文链接:http://www.cnblogs.com/amboyna/archive/2009/02/03/1383000.html    看了css,原来以为没啥技术含量,狂背就成了,现...
  • u010874036
  • u010874036
  • 2016年04月05日 20:16
  • 499
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:不规则背景图片滑动门
举报原因:
原因补充:

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