经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › 100%点击区的滑动门

查看: 4209|回复: 7

[教程] 100%点击区的滑动门 [复制链接]

blank　楼主

怿飞

荣誉管理

帖子: 2375
体力: 12545
威望: 125
居住地: 浙江省杭州市

发表于 2007-2-10 14:47:28 |显示全部楼层

BLOG地址：http://www.planabc.net/article.asp?id=107

学习标准的朋友，一般都会在学习的过程中接触到CSS滑动门技术，或许大家也都看过这篇文章《CSS中的滑动门技术》，如果你还没接触过或还没看过上文或有点忘记内容，也没关系，可以点击上面的文章链接，先了解或温习一遍。

在《CSS中的滑动门技术》一文中的滑动门例子，大家仔细实验，或许已经发现，链接区有9像素的盲点无法点击，而且在IE下，只能点击文字部分大小，不能点击整个按钮区块。而我们或许期望的是整个按钮区块都可以点击，并且不允许有盲点存在。

那我们又该如何去实现呢？下面我们一起来探讨一些解决方法：

首先为了方便我们先把《CSS中的滑动门技术》中的代码移过来：

XHTML部分：

<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

复制代码

CSS部分：

#header {
float:left;
width:100%;
background:#DAE0D2 url("bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url("left.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
float:left;
display:block;
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
color:#333;
}
#header #current {
background-image:url("left_on.gif");
}
#header #current a {
background-image:url("right_on.gif");
color:#333;
padding-bottom:5px;
}

复制代码

查看效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS中滑动门技术</title>
<style type="text/css" media="screen">
body {
  background:#fff;
  margin:0;
  padding:0;
  color:#000;
  font:x-small/1.5em Georgia,Serif;
  voice-family: "\"}\""; voice-family:inherit;
  font-size:small;
} 
html>body {font-size:small;}
  
#header {
 float:left;
 width:100%;
 background:#DAE0D2 url("http://www.planabc.net/demo/images/bg.gif") repeat-x bottom;
 font-size:93%;
 line-height:normal;
}
#header ul {
 margin:0;
 padding:10px 10px 0;
 list-style:none;
}
#header li {
 float:left;
 background:url("http://www.planabc.net/demo/images/left.gif") no-repeat left top;
 margin:0;
 padding:0 0 0 9px;
}
#header a {
 float:left;
 display:block;
 background:url("http://www.planabc.net/demo/images/right.gif") no-repeat right top;
 padding:5px 15px 4px 6px;
 text-decoration:none;
 font-weight:bold;
 color:#765;
}
/* Commented Backslash Hack
 hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
 color:#333;
}
#header #current {
 background-image:url("http://www.planabc.net/demo/images/left_on.gif");
}
#header #current a {
 background-image:url("http://www.planabc.net/demo/images/right_on.gif");
 color:#333;
 padding-bottom:5px;
}
</style>
</head>

<body>
<div id="header">
  <ul>
    <li><a href="#">Home</a></li>
    <li id="current"><a href="#">News</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

方法一：使用相对位置负外边距

为了消除滑动门的9px的盲点区域，设置li的外边距为9px（9px为left图片的宽度大小），li的背景为right图片，不重复，右上对齐。

#header li {
background:url("right.gif") no-repeat right top;
margin-left:9px;
}

复制代码

然后让a向左移动9px，覆盖掉盲点区域，如何移动呢？可对a使用相对位置（position:relative;），用负值移动9px（left:-9px;）。由于li的宽度等于a的宽度，所以当a位置相对左移9px时，li的右边就会多出9px的盲区，如何解决呢？我们使用a的负外边距来解决（margin-right:-9px;）。

#header a {
position:relative;
left:-9px;
margin-right:-9px;
}

复制代码

设置left图片为a的背景，不重复，左上对齐，并设置文字的内边距，注意现在a的区域为整个按钮的区域，所以padding-left和padding-right的值都应为15px。

#header a {
background:url("left.gif") no-repeat left top;
padding:5px 15px 4px;
}

复制代码

另注意一个细节：在IE中链接的区域为文字区域而不是按钮区域，而在其他对标准支持比较好的浏览器里是按钮区域。为了解决这个问题，我们给IE中的a指定个固定宽度来触发IE的layout（可以选用.1em，1px，1%等值），但这样一来a在其他对标准支持比较好的浏览器里则会识别这个宽度，我们选用对标准支持比较好的浏览器识别而IE6不识别的子选择器来让a的宽度变为auto。

#header a {width:.1em;}
#header > ul a {width:auto;}

复制代码

相对应的，对于current选择器里的图片位置也要做一点调整：

#header #current {
background-image:url("right_on.gif");
}
#header #current a {
background-image:url("left_on.gif");
padding-bottom:5px;
}

复制代码

让我们把CSS代码整理优化一下：

#header li {
background:url("right.gif") no-repeat right top;
margin:0 0 0 9px;
}
#header a {
position:relative;
left:-9px;
margin-right:-9px;
width:.1em;
background:url("left.gif") no-repeat left top;
padding:5px 15px 4px;
}
#header > ul a {width:auto;}
#header #current {
background-image:url("right_on.gif");
}
#header #current a {
background-image:url("left_on.gif");
padding-bottom:5px;
}

复制代码

查看效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS中滑动门技术</title>
<style type="text/css" media="screen">
body {
  background:#fff;
  margin:0;
  padding:0;
  color:#000;
  font:x-small/1.5em Georgia,Serif;
  voice-family: "\"}\""; voice-family:inherit;
  font-size:small;
} 
html>body {font-size:small;}
  
#header {
  float:left;
  width:100%;
  background:#DAE0D2 url("http://www.planabc.net/demo/images/bg.gif") repeat-x bottom;
  font-size:93%;
  line-height:normal;
}
#header ul {
  margin:0;
  padding:10px 10px 0;
  list-style:none;
  }
#header li {
  float:left;
  background:url("http://www.planabc.net/demo/images/right.gif") no-repeat right top;
  margin:0 0 0 9px;
  padding:0;
}
#header a {
  float:left;
  display:block;
  position:relative;
  left:-9px;
  margin-right:-9px;
  width:.1em;
  background:url("http://www.planabc.net/demo/images/left.gif") no-repeat left top;
  padding:5px 15px 4px;
  text-decoration:none;
  font-weight:bold;
  color:#765;
}
#header > ul a {width:auto;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
  color:#333;
}
#header #current {
  background-image:url("http://www.planabc.net/demo/images/right_on.gif");
}
#header #current a {
  background-image:url("http://www.planabc.net/demo/images/left_on.gif");
  padding-bottom:5px;
}
</style>
</head>

<body>
<div id="header">
  <ul>
    <li><a href="#">Home</a></li>
    <li id="current"><a href="#">News</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

方法二：添加span标签

这个方法只能说是练习，实验用，真正布局的时候不推荐使用（仅是不推荐使用），毕竟添加了无语义的的span标签。

首先在结构代码中添加<span>标签

<div id="header">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li id="current"><a href="#"><span>News</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</div>

复制代码

有朋友或许问为什么要添加<span>元素呢，其实理由很简单，我们通过a和span来模拟滑动门技术，而不是例子中的li和a，好处嘛，可以避免9px的盲点区域，因为<span>元素是包含在<a>元素里的。这样处理100%点击就相对容易很多。

由于使用a和span模拟，所以对于li我们不需要额外定义

#header li{
float:left;
margin:0;
padding:0;
}

复制代码

而原本对li设置的部分，我们转移到a中设置，设置a的背景为left图片，不重复，左上对齐。并给a设置左内边距9px（left图片的宽度），即span的显示不遮挡left图片。

#header a {
background:url("left.gif") no-repeat left top;
padding-left:9px;
}

复制代码

对于span，将显示原例子中a中的设置，设置span的背景为right图片，不重复，右上对齐。并在span的左内边距减去a设置的9px左内边距，即span的左内边距为6px。同样为了一致性，我们要解决IE5/Mac的问题。

#header span {
float:left;
padding:5px 15px 4px 6px;
display:block;
background:url("right.gif") no-repeat right top;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header span {float:none;}
/* End IE5-Mac hack */

复制代码

在此方法中我们依旧会碰到上例中碰到的在IE中链接的区域为文字区域而不是按钮区域问题。如何解决呢，当然你也可以用上例中的方法解决。不过我们还可以，给a浮动来触发IE下的layout。

#header a {
float:left;
}

复制代码

相对应的，对于current选择器里的图片位置也要做一点调整：

#header #current a {
background-image:url("left_on.gif");
color:#333;
}
#header #current span{
background-image:url("right_on.gif");
padding-bottom:5px;
}

复制代码

让我们把CSS代码整理优化一下：

#header li{
float:left;
margin:0;
padding:0;
}
#header a {
float:left;
display:block;
background:url("left.gif") no-repeat left top;
padding-left:9px;
}
#header span {
float:left;
padding:5px 15px 4px 6px;
display:block;
background:url("right.gif") no-repeat right top;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header span {float:none;}
/* End IE5-Mac hack */
#header #current a {
background-image:url("left_on.gif");
color:#333;
}
#header #current span{
background-image:url("right_on.gif");
padding-bottom:5px;
}

复制代码

查看效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS中滑动门技术</title>
<style type="text/css" media="screen">
body {
  background:#fff;
  margin:0;
  padding:0;
  color:#000;
  font:x-small/1.5em Georgia,Serif;
  voice-family: "\"}\""; voice-family:inherit;
  font-size:small;
} 
html>body {font-size:small;}

#header {
  float:left;
  width:100%;
  background:#DAE0D2 url("http://www.planabc.net/demo/images/bg.gif") repeat-x bottom;
  font-size:93%;
  line-height:normal;
}
#header ul {
  margin:0;
  padding:10px 10px 0;
  list-style:none;
}
#header li{
  float:left;
  margin:0;
  padding:0;
}
#header a {
  float:left;
  display:block;
  background:url("http://www.planabc.net/demo/images/left.gif") no-repeat left top;
  padding-left:9px;
  text-decoration:none;
  font-weight:bold;
  color:#765;
}
#header span {
   float:left;
   padding:5px 15px 4px 6px;
   display:block;
   background:url("http://www.planabc.net/demo/images/right.gif") no-repeat right top;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header span {float:none;}
/* End IE5-Mac hack */
#header a:hover {
  color:#333;
}

#header #current a {
  background-image:url("http://www.planabc.net/demo/images/left_on.gif");
  color:#333;
}
  
#header #current span{
  background-image:url("http://www.planabc.net/demo/images/right_on.gif");
  padding-bottom:5px;
}
</style>
</head>

<body>
<div id="header">
  <ul>
    <li><a href="#"><span>Home</span></a></li>
    <li id="current"><a href="#"><span>News</span></a></li>
    <li><a href="#"><span>Products</span></a></li>
    <li><a href="#"><span>About</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
  </ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

参考文章：
http://www.w3cn.org/article/translate/2005/112.html
http://alistapart.com/articles/slidingdoors2/
http://www.zishu.cn/blogview.asp?logID=579

[ 本帖最后由 blankzheng 于 2007-2-10 18:06 编辑 ]

已有 1 人评分	威望	收起理由
小毅	+ 2	精品文章

总评分: 威望 + 2 查看全部评分

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

西部数码顶级域名注册商39元抢注！

使用道具举报

XMSL　

新手上路

帖子: 10
体力: 30
威望: 0

发表于 2007-2-10 15:34:57 |显示全部楼层

讲解的挺细的。

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

clmake　

初级会员

帖子: 65
体力: 154
威望: 0

发表于 2007-2-11 07:48:13 |显示全部楼层

为什么没有滑动的效果??

使用道具举报

凉爽　

walking man

钻石会员

帖子: 7633
体力: 7669
威望: 31

发表于 2007-2-11 09:47:57 |显示全部楼层

好文章,谢谢楼主分享

nameset | weibo

使用道具举报

blank　楼主

怿飞

荣誉管理

帖子: 2375
体力: 12545
威望: 125
居住地: 浙江省杭州市

发表于 2007-2-11 11:14:03 |显示全部楼层

原帖由 clmake 于 2007-2-11 07:48 发表
为什么没有滑动的效果??

先了解什么是滑动门效果！

什么是滑动门技术？究其本意，就是根据文本自适应大小，进行滑动。我们可以用背景图片来营造这样的现象，一个在左一个在右，把这两个图片想象成可以滑动的门，当文本较少的时候，两个图片重叠的就多些，当文本较多的时候就滑动开，重叠的部分就少一些。

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

使用道具举报

gy132　

新手上路

帖子: 19
体力: 47
威望: 0

发表于 2007-3-6 16:58:49 |显示全部楼层

标题太长，还是会出现缺口
有没有什么好办法呢
我是不是太偏执了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS中滑动门技术</title>
<style type="text/css" media="screen">
body {
background:#fff;
margin:0;
padding:0;
color:#000;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
}
html>body {font-size:small;}
#header {
float:left;
width:100%;
background:#DAE0D2 url("http://www.planabc.net/demo/images/bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li{
float:left;
margin:0;
padding:0;
}
#header a {
float:left;
display:block;
background:url("http://www.planabc.net/demo/images/left.gif") no-repeat left top;
padding-left:9px;
text-decoration:none;
font-weight:bold;
color:#765;
}
#header span {
float:left;
padding:5px 15px 4px 6px;
display:block;
background:url("http://www.planabc.net/demo/images/right.gif") no-repeat right top;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header span {float:none;}
/* End IE5-Mac hack */
#header a:hover {
color:#333;
}
#header #current a {
background-image:url("http://www.planabc.net/demo/images/left_on.gif");
color:#333;
}
#header #current span{
background-image:url("http://www.planabc.net/demo/images/right_on.gif");
padding-bottom:5px;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li id="current"><a href="#"><span>News</span></a></li>
<li><a href="#"><span>Productsssssssssssssssssssssssssssssssssssssssssssssssssssssssss</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</div>
</body>
</html>