100%點擊區的滑動門

來源:互聯網
上載者:User

學習標準的朋友,一般都會在學習的過程中接觸到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("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;}</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>

    [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

方法一:使用相對位置負外邊距

為了消除滑動門的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("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("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("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("right_on.gif");}#header #current a { background-image:url("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>

    [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

方法二:添加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("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("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("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("left_on.gif"); color:#333;} #header #current span{ background-image:url("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>

    [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。