Tutorial sobre cómo hacer una exquisita barra de navegación de Alipay

De hecho, en realidad no es un tutorial. Simplemente hago algo cuando no tengo nada que hacer y luego lo publico para que todos lo compartan. Espero que no duden en enseñarme ^!^

Como acababa de ver el tutorial de Yadong, que era algo similar a este, lo pensé y escribí un JS que solo usaba un párrafo corto y listo. JQuery se utiliza en Yadong. Siento que si se puede cargar algo más simple directamente en JS, entonces se puede llamar a la biblioteca cuando haya una gran demanda.

El código HTML principal es el siguiente:

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

Aviso:

1. Los elementos del menú se pueden expandir libremente copiando la etiqueta de la lista roja con el nombre de clase "subelemento" en el código. Es decir, copia todo el contenido de la etiqueta ul y pégala después.
2. Simplemente agregue el atributo id de la etiqueta de lista ul con el nombre de clase "subelemento" en secuencia, como: subelemento1, subelemento2, subelemento3...
3. La etiqueta de la lista azul con el nombre de clase "activo" representa el elemento del menú predeterminado al cargar.

Código JavaScript principal:

La función principal es: el efecto de que los elementos del submenú cambien a medida que cambian los elementos del menú (similar a la pestaña pestaña).

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

No explicaré mucho sobre el código JS, ya he comentado las partes importantes. Como a mí me pasa lo mismo, me costó mucho lograr el efecto y espero que los expertos puedan darme más consejos.

El código CSS es un poco pequeño, así que no lo publicaré. De hecho, el código principal consta de solo unas pocas oraciones. ¡Necesito escribir más para que quede perfecto! Los estudiantes interesados ​​pueden descargar directamente mi código fuente para investigar. Si tienes alguna pregunta, déjame un mensaje ^!^