精巧支付宝导航条制作教程
作者:keelii 来源:蓝色理想 时间:2010-03-20 21:25:00
其实也算不上教程,也就是自己没事儿的时候做点东西然后发上来大家交流交流,希望大家不吝赐教^!^
因为刚看过亚东的教程和这个有点相似,所以就自己琢磨了一下写了一个仅用到一小段的JS就搞定了。亚东的里面要用到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>
注意:
菜单项是可以自由扩展的,前提是复制代码中类名为“sub-item”红色列表标签。也就是copy这个ul标签的所有内容粘贴其后就行。
类名为“sub-item”列表标签ul的id属性依次类加就OK了,如:sub-item1,sub-item2,sub-item3…
类名为“active”的蓝色列表标签表示载入时的默认菜单项。
核心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代码有点小多我就不贴出来了,其实核心代码就那几句,主要为了仿制得完美就得多写一点啦!有兴趣的同学直接下载我的源码研究。有什么问题直接给我留言^!^
原文:http://www.keelii.com/alipay-tab/
本站下载地址:alipay_tab.rar (12.74 KB)
标签:支付宝,导航,教程,css
0
投稿
猜你喜欢
清除浮动新说
2009-12-25 18:49:00
mysql表的性能提升的相关问题
2010-03-03 16:31:00
贝聿铭写给年轻设计师的十点忠告
2010-01-24 18:46:00
高效的删除HTML标签的函数
2009-02-26 13:02:00
框架iframe子页面,自适应高度方法
2008-06-07 13:31:00
asp中通过addnew添加内容后取得当前文章的自递增ID的方法
2011-02-05 11:05:00
谈谈设计师的发展
2009-03-17 18:20:00
使用 createProcessingInstruction 方法不能输出 encoding 的解决方法
2009-03-10 18:22:00
Oracle关于时间/日期的操作
2009-02-26 10:37:00
MYSQL教程:检查数据表和修复数据表
2009-03-11 15:24:00
WEB2.0网页制作标准教程(8)CSS布局入门
2007-09-11 13:21:00
ASP四级连动下拉列表程序段
2009-07-03 15:33:00
MySQL百万级高并发网站实战攻略
2009-03-25 15:49:00
表单验证通用脚本(支持所有主流浏览器)
2010-08-08 08:54:00
可以在线创建文件夹吗?
2009-11-01 18:07:00
sql server 锁表语句分享
2012-02-12 15:49:20
W3C优质网页小贴士(三)
2008-04-09 13:32:00
网站508规范(译)
2008-04-03 13:26:00
SQL“多字段模糊匹配关键字查询”
2008-04-24 14:16:00
两个不太常用的 CSS Hack
2008-06-27 12:49:00