精巧支付宝导航条制作教程
作者:keelii 来源:蓝色理想 发布时间:2010-03-20 21:25:00
标签:支付宝,导航,教程,css
其实也算不上教程,也就是自己没事儿的时候做点东西然后发上来大家交流交流,希望大家不吝赐教^!^
因为刚看过亚东的教程和这个有点相似,所以就自己琢磨了一下写了一个仅用到一小段的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)
0
投稿
猜你喜欢
- 一、什么是执行计划(explain plan) 执行计划:一条查询语句在ORACLE中的执行过程或访问路径的描述。 二、如何查看执行计划 1
- 如何一行行地读取文件?这样就可以做到一行行地读出了:dim input(30) ' 定义一个数组,大小
- 我在一篇文章所说,首页的“站点名称”最好用h1标签来定义,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对
- IE历来被web标准的拥护者所诟病,而当FireFox横空出世以后,更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不
- 大部分情况下,这种动态生成的sql查询语句写法如下: 代码如下:select A表.字段1,A表.字段2,B表.字段返回,C表.字段返回 f
- 今天在给一个img加链接时发现的<body> <a href="#1" >&
- 代码如下:<% '功能:取得文件扩展名 Function getFileExt(sFileNam
- 编写兼容IE和FireFox的脚本确定的件很烦人的事,今日又经历了一次。一、正式表达式问题试图用以下表达式提取中括号“]”后面的内容,连接调
- 网页制作中是免不了与表格打交道的。表格是网页制作的基础,在网页布局中起着举足轻重的作用,熟练掌握表格的操作,是你制作网页的辅路石,也是你成为
- 前些日子有网友问:将ASP纪录集输出成n列的的表格形式显示的方法?现在写了一个,方便大家使用。'定义变量 Dim cn,r
- 原型扩展:>> String.prototype :String对象原型扩展 --------------
- 如何让图片自动缩放以适合界面大小,拿出你的Editplus,打开c_function.asp文件,找到UBBCode函数,在第417行有如下
- 通过锁机制,可以实现多线程同时对某个表进行操作。如下图所示,在某个时刻,用户甲、用户乙、用户丙可能会同时或者先后(前面一个作业还没有完成)对
- 方法很简单,实现原理:使用asp的Request.ServerVariables("HTTP_REFERER") 判断来
- 近日,有关微软Open XML标准的问题又引发了某些业内人士的关注。其一是因为日前ISO(国际标准组织)成员南非和巴西相继就ISO批准微软的
- MySQL插件式存储引擎是MySQL数据库服务器中的组件,负责为数据库执行实际的数据I/O操作,并能允许和强制执行面向特殊应用需求的特定特性
- 当点了链接后,跳出的网页地址是https://www.aspxhome.com/ 或https://www.cidianwang.
- 上次用Javascript+ASP实现了无刷新的新闻列表,最后还有一个小问题没有解决:下边的分页数列"首页、上10页、下10页、尾
- 在XHTML标签中有一些标签的作用是相似的,当然这里的相似是指语义相似,以至于很多人都不清楚这些相似的标签如何使用,那么今天的主题就是分解相
- 因为有个老Yashica相机机身,前一阵忍不住想配几个标准镜头。到国内购物网站以及摄影器材交流论坛上看了看,发现不仅很少,价格不实在,而且品