找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2265|回复: 0

[教程] 精巧支付宝导航条制作教程

[复制链接]
发表于 2011-12-28 09:25:16 | 显示全部楼层 |阅读模式 来自 中国–江苏–南京
其实也算不上教程,也就是自己没事儿的时候做点东西然后发上来大家交流交流,希望大家不吝赐教^!^
因为刚看过亚东的教程和这个有点相似,所以就自己琢磨了一下写了一个仅用到一小段的JS就搞定了。亚东的里面要用到JQuery。我感觉要是简单一点的东西直接上JS就行了,有大量需求时再调用库才好。
核心HTML代码如下:
  1. <div id="menu">
  2.         <div id="top"><!–橙色菜单项部分:此标签作用在于滑动门效果的实现—>
  3.             <ul id="item"><!–列表项li可自由添加与修改 –>
  4.     <li id="item1"><a href="#"><span>前端开发</span></a></li>
  5.     <li id="item2" class="active"><a href="#"><span>我要付款</span></a></li>
  6.     <li id="item3"><a href="#"><span>网站开发</span></a></li>
  7.     <li id="item4"><a href="#"><span>交易管理</span></a></li>
  8.     <li id="item5"><a href="#"><span>我的支付宝</span></a></li>
  9.     <li id="item6"><a href="#"><span>安全中心</span></a></li>
  10.     <li id="item7"><a href="#"><span>商家服务</span></a></li>
  11.     <li class="ext1"></li><!–额外的标签用于定位菜单项右上圆角 –>
  12.             </ul>
  13.         </div>
  14.         <div id="bot"><!–灰色子菜单项部分:此标签作用也在于滑动门效果的实现–>
  15.             <ul class="sub-item" id="sub-item1">
  16.     <li><a href="#"><span>HTML</span></a></li>
  17.     <li><a href="#"><span>CSS</span></a></li>
  18.     <li><a href="#"><span>JavaScript</span></a></li>
  19.     <li><a href="#"><span>ActionScript</span></a></li>
  20.     <li><a href="#"><span>Photoshop</span></a></li>
  21.     <li><a href="#"><span>Fireworks</span></a></li>
  22.     <li><a href="#"><span>Flash</span></a></li>
  23.     <li class="ext2"></li><!–额外的标签用于定位菜单项右下圆角 –>
  24.             </ul>
  25.          </div>   
  26.     </div>
复制代码
注意:
  • 菜单项是可以自由扩展的,前提是复制代码中类名为“sub-item”红色列表标签。也就是copy这个ul标签的所有内容粘贴其后就行。
  • 类名为“sub-item”列表标签ul的id属性依次类加就OK了,如:sub-item1,sub-item2,sub-item3…
  • 类名为“active”的蓝色列表标签表示载入时的默认菜单项。
核心JavaScript代码:

主要功能是:子菜单项随着菜单项变化而变化的效果(类似tab选项卡)。
  1. window.onload = function() {
  2.         for( i=1; i<8; i++ ){
  3.             var nodeItem = document.getElementById("item"+i);    //遍历每个菜单项增加 onClick事件
  4.             nodeItem.onclick = function() {
  5.                 /*菜单激活动态样式*/
  6.                 for( n=0; n<6; n++){
  7.                     document.getElementsByTagName("li")[n].className = "";
  8.                     //alert(this.className);
  9.                 }
  10.                 this.className = "active";
  11.                 var linkNode = parseInt( this.id.substring(4,5) );   
  12.                 for ( j=1; j<10; j++){        //按顺序匹配菜单项和菜单内容
  13.                     var nodeSubItem = document.getElementById("sub-item"+j);
  14.                     if ( linkNode == j ){    //如果菜单项和菜单内容匹配则显示,否则隐藏
  15.                         nodeSubItem.style.display = "block";
  16.                     }else{
  17.                         nodeSubItem.style.display = "none";
  18.                     }
  19.                 }
  20.             }
  21.         }
  22.     }

复制代码
JS代码就不多做解释了,重要部分我已经给出注释。因为我也是菜鸟,费了很大劲才实现效果,还希望高手多多指点。CSS代码有点小多我就不贴出来了,其实核心代码就那几句,主要为了仿制得完美就得多写一点啦!有兴趣的同学直接下载我的源码研究。有什么问题直接给我留言^!^

评分

参与人数 1金币 +1 收起 理由
光明使者 + 1 赞一个!

查看全部评分

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-24 23:16 , Processed in 0.046192 second(s), 13 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表