Учебник по созданию изысканной навигационной панели Alipay

На самом деле, это не совсем учебник. Я просто делаю что-то, когда мне нечего делать, а затем публикую это для всех. Надеюсь, вы без колебаний научите меня^!^

Поскольку я только что увидел урок Ядонга, который чем-то был похож на этот, я подумал об этом и написал JS, в котором использовался только короткий абзац, и все было готово. JQuery используется в Yadong. Я чувствую, что если что-то попроще можно напрямую загрузить в 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>

Уведомление:

1. Пункты меню можно свободно расширять, скопировав в код метку красного списка с именем класса «подпункт». То есть скопируйте все содержимое тега ul и вставьте его потом.
2. Просто добавьте атрибут id тега списка ul с именем класса «sub-item» последовательно, например: sub-item1, sub-item2, sub-item3...
3. Метка синего списка с именем класса «активный» представляет собой пункт меню по умолчанию при загрузке.

Основной код 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 немного мал, поэтому я не буду его публиковать. На самом деле основной код — это всего лишь несколько предложений, чтобы сделать его идеальным! Заинтересованные студенты могут напрямую загрузить мой исходный код для исследования. Если у вас есть вопросы, просто оставьте мне сообщение^!^