100%点击区的滑动门



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;
}

查看效果:http://www.mzwu.com/pic/20070827/001.htm

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

为了消除滑动门的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;
}

查看效果:http://www.mzwu.com/pic/20070827/002.htm

方法二:添加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;
}

查看效果:http://www.mzwu.com/pic/20070827/003.htm

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

上一篇: CSS中的滑动门技术
下一篇: JavaScript的9个陷阱及评点
文章来自: 怿飞
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 4506
发表评论
登录后再发表评论!