CSS代碼有點(diǎn)小多我就沒有貼進(jìn)去了,實(shí)在中心代碼就那多少句,次要為了仿造得圓滿就得多寫小半啦!有興味的同窗間接鍵入我的源碼鉆研。
中心JavaScript代碼:
類名為“active”的藍(lán)色列表標(biāo)簽示意載入時(shí)的默許菜單項(xiàng)。
實(shí)在也算沒有上教程,也就是本人沒事兒的時(shí)分做點(diǎn)貨色而后發(fā)下去自己交換交換,指望自己沒有吝賜教^!^
。
類名為“sub-item”列表標(biāo)簽ul的id屬性順次類加就OK了,如:sub-item1,sub-item2,sub-item3…
菜單項(xiàng)是能夠自正在擴(kuò)大的,大前提是復(fù)制代碼中類名為“sub-item”白色列表標(biāo)簽。
留意:
</div>
</div>
</ul>
<li class="ext2"></li><!–額定的標(biāo)簽用來定位菜單項(xiàng)右下圓角 –>
<li><a href="#"><span>Flash</span></a></li>
<li><a href="#"><span>Fireworks</span></a></li>
<li><a href="#"><span>Photoshop</span></a></li>
<li><a href="#"><span>ActionScript</span></a></li>
<li><a href="#"><span>JavaScript</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>HTML</span></a></li>
<ul class="sub-item" id="sub-item1">
<div id="bot"><!–灰骰子菜單項(xiàng)全體:此標(biāo)簽作用也正在于滑行門成效的完成–>
</div>
</ul>
<li class="ext1"></li><!–額定的標(biāo)簽用來定位菜單項(xiàng)右上圓角 –>
<li id="item7"><a href="#"><span>商家效勞</span></a></li>
<li id="item6"><a href="#"><span>保險(xiǎn)核心</span></a></li>
<li id="item5"><a href="#"><span>我的領(lǐng)取寶</span></a></li>
<li id="item4"><a href="#"><span>買賣治理</span></a></li>
<li id="item3"><a href="#"><span>網(wǎng)站開拓</span></a></li>
<li id="item2" class="active"><a href="#"><span>我要付款</span></a></li>
<li id="item1"><a href="#"><span>前者開拓</span></a></li>
<ul id="item"><!–列表項(xiàng)li可自正在增添與修正 –>
<div id="top"><!–杏黃菜單項(xiàng)全體:此標(biāo)簽作用正在于滑行門成效的完成—>
<div id="menu">
中心HTML代碼如次:
由于剛剛看過亞東的教程和某個(gè)有點(diǎn)類似,因?yàn)榫捅救舜α艘幌聦懥艘欢葍H用到一小段的JS就搞定了。
}
}
}
}
}
nodeSubItem.style.display = "none";
}else{
nodeSubItem.style.display = "block";
if ( linkNode == j ){ //假如菜單項(xiàng)和菜單形式婚配則顯現(xiàn),要不躲藏
var nodeSubItem = document.getElementById("sub-item"+j);
for ( j=1; j<10; j++){ //按次第婚配菜單項(xiàng)和菜單形式
var linkNode = parseInt( this.id.substring(4,5) );
this.className = "active";
}
//alert(this.className);
document.getElementsByTagName("li")[n].className = "";
for( n=0; n<6; n++){
/*菜單激運(yùn)動(dòng)態(tài)款式*/
nodeItem.onclick = function() {
var nodeItem = document.getElementById("item"+i); //遍歷每個(gè)菜單項(xiàng)增多 onClick事情
for( i=1; i<8; i++ ){
window.onload = function() {
次要性能是:子菜單項(xiàng)隨著菜單項(xiàng)變遷而變遷的成效(相似tab選項(xiàng)卡)。有什么成績間接給我揮筆^!^(義務(wù)編者:帝位庫)
JS代碼就沒有多做注釋了,主要全體我曾經(jīng)給出詮釋。亞東的外面要用到JQuery。由于我也是菜鳥,費(fèi)了很大勁才完成成效,還指望高手多多指導(dǎo)。也就是copy某個(gè)ul標(biāo)簽的一切形式粘貼其后就行。我覺得要是容易小半的貨色間接上JS就行了,有少量需要時(shí)再調(diào)用庫才好。