100%點(diǎn)擊區(qū)的滑動(dòng)門(mén)代碼
更新時(shí)間:2007年03月07日 00:00:00 作者:
讓我們把CSS代碼整理優(yōu)化一下:
復(fù)制代碼 代碼如下:
#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;
}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
方法二:添加span標(biāo)簽
這個(gè)方法只能說(shuō)是練習(xí),實(shí)驗(yàn)用,真正布局的時(shí)候不推薦使用(僅是不推薦使用),畢竟添加了無(wú)語(yǔ)義的的span標(biāo)簽。
首先在結(jié)構(gòu)代碼中添加<span>標(biāo)簽
<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>
有朋友或許問(wèn)為什么要添加<span>元素呢,其實(shí)理由很簡(jiǎn)單,我們通過(guò)a和span來(lái)模擬滑動(dòng)門(mén)技術(shù),而不是例子中的li和a,好處嘛,可以避免9px的盲點(diǎn)區(qū)域,因?yàn)?lt;span>元素是包含在<a>元素里的。這樣處理100%點(diǎn)擊就相對(duì)容易很多。
由于使用a和span模擬,所以對(duì)于li我們不需要額外定義
#header li{
float:left;
margin:0;
padding:0;
}
而原本對(duì)li設(shè)置的部分,我們轉(zhuǎn)移到a中設(shè)置,設(shè)置a的背景為left圖片,不重復(fù),左上對(duì)齊。并給a設(shè)置左內(nèi)邊距9px(left圖片的寬度),即span的顯示不遮擋left圖片。
#header a {
background:url("left.gif") no-repeat left top;
padding-left:9px;
}
對(duì)于span,將顯示原例子中a中的設(shè)置,設(shè)置span的背景為right圖片,不重復(fù),右上對(duì)齊。并在span的左內(nèi)邊距減去a設(shè)置的9px左內(nèi)邊距,即span的左內(nèi)邊距為6px。同樣為了一致性,我們要解決IE5/Mac的問(wèn)題。
#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 */
在此方法中我們依舊會(huì)碰到上例中碰到的在IE中鏈接的區(qū)域?yàn)槲淖謪^(qū)域而不是按鈕區(qū)域問(wèn)題。如何解決呢,當(dāng)然你也可以用上例中的方法解決。不過(guò)我們還可以,給a浮動(dòng)來(lái)觸發(fā)IE下的layout。
#header a {
float:left;
}
相對(duì)應(yīng)的,對(duì)于current選擇器里的圖片位置也要做一點(diǎn)調(diào)整:
#header #current a {
background-image:url("left_on.gif");
color:#333;
}
#header #current span{
background-image:url("right_on.gif");
padding-bottom:5px;
}
讓我們把CSS代碼整理優(yōu)化一下:
#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;
}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
參考文章:
http://www.w3cn.org/article/translate/2005/112.html
http://alistapart.com/articles/slidingdoors2/
http://www.zishu.cn/blogview.asp?logID=579
相關(guān)文章
提高CSS網(wǎng)頁(yè)渲染效率的11點(diǎn)注意事項(xiàng)
CSS學(xué)習(xí)越深入,我們需要關(guān)注的細(xì)節(jié)之處就越多,今天我們通過(guò)11個(gè)注意點(diǎn)來(lái)提高CSS的網(wǎng)頁(yè)渲染效率。2008-08-08css創(chuàng)意ul+li實(shí)現(xiàn)的細(xì)線表格實(shí)現(xiàn)代碼
非常用創(chuàng)意的用ul+li實(shí)現(xiàn)的細(xì)線表格效果,不用table2008-08-08CSS樣式表規(guī)劃與管理的經(jīng)驗(yàn)總結(jié)
CSS樣式表規(guī)劃與管理的經(jīng)驗(yàn)總結(jié)...2007-09-09