Tutorial sobre como fazer uma excelente barra de navegação Alipay

Na verdade, não é realmente um tutorial. Eu apenas faço algo quando não tenho nada para fazer e depois posto para todos compartilharem. Espero que vocês não hesitem em me ensinar ^!^.

Como acabei de ver o tutorial do Yadong que era um pouco parecido com este, pensei sobre isso e escrevi um JS que usava apenas um parágrafo curto e pronto. JQuery é usado em Yadong. Acho que se algo mais simples puder ser carregado diretamente no JS, a biblioteca poderá ser chamada quando houver uma grande demanda.

O código HTML principal é o seguinte:

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

Perceber:

1. Os itens do menu podem ser expandidos livremente copiando o rótulo da lista vermelha com o nome da classe "subitem" no código. Ou seja, copie todo o conteúdo da tag ul e cole depois.
2. Basta adicionar o atributo id da tag de lista ul com o nome da classe "subitem" em sequência, como: subitem1, subitem2, subitem3...
3. O rótulo da lista azul com o nome da classe "ativo" representa o item de menu padrão durante o carregamento.

Código JavaScript principal:

A função principal é: o efeito da mudança dos itens do submenu conforme os itens do menu mudam (semelhante à guia guia).

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";
}
}
}
}
}

Não vou explicar muito sobre o código JS, já comentei as partes importantes. Como sou o mesmo, foi preciso muito esforço para conseguir o efeito e espero que os especialistas possam me dar mais conselhos.

O código CSS é um pouco pequeno, então não vou publicá-lo. Na verdade, o código principal contém apenas algumas frases que preciso escrever mais para torná-lo perfeito! Os alunos interessados ​​​​podem baixar diretamente meu código-fonte para pesquisa. Se você tiver alguma dúvida, deixe-me uma mensagem^!^