정교한 Alipay 네비게이션 바 제작 튜토리얼

사실 튜토리얼은 아니고 그냥 할 일 없을 때 만들어서 모두가 공유할 수 있게 올려드리고 있으니 꼭 가르쳐주세요^!^

방금 Yadong님의 튜토리얼을 본 적이 있었는데 이것과 좀 비슷해서 고민하다가 짧은 문단만을 사용하는 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. 코드에서 클래스 이름이 "sub-item"인 빨간색 목록 레이블을 복사하여 메뉴 항목을 자유롭게 확장할 수 있습니다. 즉, ul 태그의 내용을 모두 복사한 후 붙여넣으면 됩니다.
2. 하위 항목1, 하위 항목2, 하위 항목3...과 같이 클래스 이름이 "하위 항목"인 목록 태그 ul의 id 속성을 순서대로 추가하기만 하면 됩니다.
3. 클래스 이름이 "active"인 파란색 목록 레이블은 로드 시 기본 메뉴 항목을 나타냅니다.

핵심 JavaScript 코드:

주요 기능은 메뉴 항목이 변경됨에 따라 하위 메뉴 항목도 변경되는 효과입니다(탭 탭과 유사).

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 코드가 좀 작아서 올리지 않겠습니다. 사실 핵심 코드는 몇 문장만 더 작성하면 완성됩니다! 관심 있는 학생들은 연구를 위해 내 소스 코드를 직접 다운로드할 수 있습니다. 궁금하신 점은 메시지 남겨주세요^!^