|
原文：http://www.keelii.com/alipay-tab/
其實(shí)也算不上教程，也就是自己沒事兒的時候做點(diǎn)東西然后發(fā)上來大家交流交流，希望大家不吝賜教^!^
因?yàn)閯偪催^亞東的教程和這個有點(diǎn)相似，所以就自己琢磨了一下寫了一個僅用到一小段的JS就搞定了。亞東的里面要用到JQuery。我感覺要是簡單一點(diǎn)的東西直接上JS就行了，有大量需求時再調(diào)用庫才好。
核心HTML代碼如下：
<div id="menu">
<div id="top"><!–橙色菜單項(xiàng)部分：此標(biāo)簽作用在于滑動門效果的實(shí)現(xiàn)—>
<ul id="item"><!–列表項(xiàng)li可自由添加與修改 –>
<li id="item1"><a href="#"><span>前端開發(fā)</span></a></li>
<li id="item2" class="active"><a href="#"><span>我要付款</span></a></li>
<li id="item3"><a href="#"><span>網(wǎng)站開發(fā)</span></a></li>
<li id="item4"><a href="#"><span>交易管理</span></a></li>
<li id="item5"><a href="#"><span>我的支付寶</span></a></li>
<li id="item6"><a href="#"><span>安全中心</span></a></li>
<li id="item7"><a href="#"><span>商家服務(wù)</span></a></li>
<li class="ext1"></li><!–額外的標(biāo)簽用于定位菜單項(xiàng)右上圓角 –>
</ul>
</div>
<div id="bot"><!–灰色子菜單項(xiàng)部分：此標(biāo)簽作用也在于滑動門效果的實(shí)現(xiàn)–>
<ul class="sub-item" id="sub-item1">
<li><a href="#"><span>HTML</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>JavaScript</span></a></li>
<li><a href="#"><span>ActionScript</span></a></li>
<li><a href="#"><span>Photoshop</span></a></li>
<li><a href="#"><span>Fireworks</span></a></li>
<li><a href="#"><span>Flash</span></a></li>
<li class="ext2"></li><!–額外的標(biāo)簽用于定位菜單項(xiàng)右下圓角 –>
</ul>
</div>
</div>
- 菜單項(xiàng)是可以自由擴(kuò)展的，前提是復(fù)制代碼中類名為“sub-item”紅色列表標(biāo)簽。也就是copy這個ul標(biāo)簽的所有內(nèi)容粘貼其后就行。
- 類名為“sub-item”列表標(biāo)簽ul的id屬性依次類加就OK了，如：sub-item1,sub-item2,sub-item3…
- 類名為“active”的藍(lán)色列表標(biāo)簽表示載入時的默認(rèn)菜單項(xiàng)。
核心JavaScript代碼：
主要功能是：子菜單項(xiàng)隨著菜單項(xiàng)變化而變化的效果(類似tab選項(xiàng)卡)。
window.onload = function() {
for( i=1; i<8; i++ ){
var nodeItem = document.getElementById("item"+i); //遍歷每個菜單項(xiàng)增加 onClick事件
nodeItem.onclick = function() {
/*菜單激活動態(tài)樣式*/
for( n=0; n<6; n++){
document.getElementsByTagName("li")[n].className = "";
//alert(this.className);
}
this.className = "active";
var linkNode = parseInt( this.id.substring(4,5) );
for ( j=1; j<10; j++){ //按順序匹配菜單項(xiàng)和菜單內(nèi)容
var nodeSubItem = document.getElementById("sub-item"+j);
if ( linkNode == j ){ //如果菜單項(xiàng)和菜單內(nèi)容匹配則顯示，否則隱藏
nodeSubItem.style.display = "block";
}else{
nodeSubItem.style.display = "none";
}
}
}
}
}
CSS代碼有點(diǎn)小多我就不貼出來了，其實(shí)核心代碼就那幾句，主要為了仿制得完美就得多寫一點(diǎn)啦！有興趣的同學(xué)直接下載我的源碼研究。有什么問題直接給我留言^!^
最終效最終果預(yù)覽
代碼及原素材下載
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2972928-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2010/7456.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
