Tutorial on making exquisite Alipay navigation bar

In fact, it’s not really a tutorial. I just make something when I have nothing to do and then post it for everyone to share. I hope you won’t hesitate to teach me^!^

Because I had just seen Yadong’s tutorial which was somewhat similar to this one, I thought about it and wrote a JS that only used a short paragraph and it was done. JQuery is used in Yadong. I feel that if something simpler can be directly uploaded to JS, then the library can be called when there is a large demand.

The core HTML code is as follows:

<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>

Notice:

1. Menu items can be freely expanded by copying the red list label with the class name "sub-item" in the code. That is to say, copy all the contents of the ul tag and paste it afterwards.
2. Just add the id attribute of the list tag ul with the class name "sub-item" in sequence, such as: sub-item1, sub-item2, sub-item3...
3. The blue list label with the class name "active" represents the default menu item when loading.

Core JavaScript code:

The main function is: the effect of submenu items changing as the menu items change (similar to tab 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";
}
}
}
}
}

I won’t explain much about the JS code, I have already commented the important parts. Because I am the same, it took a lot of effort to achieve the effect, and I hope experts can give me more advice.

The CSS code is a bit small so I won’t post it. In fact, the core code is just a few sentences. I need to write more to make it perfect! Interested students can directly download my source code for research. If you have any questions, just leave me a message^!^