ホーム>Web デザインのチュートリアル>ウェブ特殊効果

絶妙な Alipay ナビゲーション バーの作成チュートリアル

著者：Eve Cole 更新時間：2010-03-19 16:27:18

実際、これはチュートリアルではなく、何もすることがないときに何かを作成して、それをみんなに共有してもらうだけです。ぜひ教えてください。

Yadong のチュートリアルがこれに似ていたので、それを考えて短い段落だけを使用した JS を書いて完了しました。 YadongではJQueryが使われています。もっと単純なものを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. クラス名「sub-item」を持つリストタグ ul の id 属性を、sub-item1、sub-item2、sub-item3... のように順番に追加するだけです。
  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 コードは少し小さいので、投稿しません。実際、コア コードを完成させるには、さらに書く必要があります。興味のある学生は、研究のために私のソースコードを直接ダウンロードできます。ご質問がございましたら、メッセージを残してください^!^

関連記事