其實也不算教程,也就是自己沒事的時候做點東西然後發上來大家交流交流,希望大家不吝賜教^!^
因為剛看過亞東的教學和這個有點相似,所以就自己琢磨了一下寫了一個只用到一小段的JS就搞定了。亞東的裡面要用到JQuery。我感覺要是簡單一點的東西直接上JS就行了,有大量需求時再呼叫函式庫才好。
核心HTML程式碼如下:
<div id="menu">
<div id="top"><!–橙色菜单项部分:此标签作用在于滑动门效果的实现—>
<ul id="item"><!–列表项li可自由添加与修改–>
<li id="item1"><a href="#"><span>前端开发</span></a></li>
<li id="item2" class="active"><a href="#"><span>我要付款</span></a></li>
<li id="item3"><a href="#"><span>网站开发</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>商家服务</span></a></li>
<li class="ext1"></li><!–额外的标签用于定位菜单项右上圆角–>
</ul>
</div>
<div id="bot"><!–灰色子菜单项部分:此标签作用也在于滑动门效果的实现–>
<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><!–额外的标签用于定位菜单项右下圆角–>
</ul>
</div>
</div>
注意:
核心JavaScript程式碼:
主要功能是:子選單項目隨著選單項目變化而變化的效果(類似tab選項卡)。
window.onload = function() {
for( i=1; i<8; i++ ){
var nodeItem = document.getElementById("item"+i); //遍历每个菜单项增加onClick事件
nodeItem.onclick = function() {
/*菜单激活动态样式*/
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++){ //按顺序匹配菜单项和菜单内容
var nodeSubItem = document.getElementById("sub-item"+j);
if ( linkNode == j ){ //如果菜单项和菜单内容匹配则显示,否则隐藏
nodeSubItem.style.display = "block";
}else{
nodeSubItem.style.display = "none";
}
}
}
}
}
JS程式碼就不多做解釋了,重要部分我已經給註解。因為我也是,費了很大勁才實現效果,還希望高手多指點點。
CSS程式碼有點小多我就不貼出來了,其實核心程式碼就那幾句,主要為了仿製得完美就得多寫一點啦!有興趣的同學直接下載我的原始碼研究。有什麼問題直接留言給我^!^