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

发表于 2010年2月2日由 kily

alipay-tab

其实也算不上教程，也就是自己没事儿的时候做点东西然后发上来大家交流交流，希望大家不吝赐教^!^

因为刚看过亚东的教程和这个有点相似，所以就自己琢磨了一下写了一个仅用到一小段的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>

注意：

1.菜单项是可以自由扩展的，前提是复制代码中类名为“sub-item”红色列表标签。也就是copy这个ul标签的所有内容粘贴其后就行。
2.类名为“sub-item”列表标签ul的id属性依次类加就OK了，如：sub-item1,sub-item2,sub-item3…
3.类名为“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代码有点小多我就不贴出来了，其实核心代码就那几句，主要为了仿制得完美就得多写一点啦！有兴趣的同学直接下载我的源码研究。有什么问题直接给我留言^!^

最终效最终果预览

代码及原素材下载

《精巧支付宝导航条制作教程》上有 50 条评论

菜鸟在 2011年6月6日02:14 说：

我想下载下来改改

回复 ↓
yuliang.wang 在 2011年4月26日15:30 说：

你好 keelii 我如果要扩大黄色区域的高度请问背景的位置怎么来设置呢？

回复 ↓
- kily 在 2011年4月27日08:52 说：
  
  @yuliang.wang 这个图片是我当时从支付宝上down下来的，没法改哦！
  
  回复 ↓
  - yuliang.wang 在 2011年4月27日09:03 说：
    
    很开心您的回复，我想问的是，我ps改了图片高度，那么background：里面的位置怎么去设置。以前的-110px应该改成多少，具体的原理是什么？如何精确？
    
    回复 ↓
    - kily 在 2011年4月28日09:12 说：
      
      @yuliang.wang 你可以在火狐的插件Firebug里面动态的改下试试。具体原理你可以google “css sprite”
      
      回复 ↓
Garyjm 在 2010年5月17日17:04 说：

我最近也在学习都找不到好的素材
你的很不错可是我想在基础上修改
使得点击后或一打开就停留在某个子菜单上面而不仅仅是鼠标移动到子菜单才显示背景

另一个是每一个页面固定一个一级菜单下面的子菜单上面，移到其他选项如果未点击链接则自动返回固定子菜单上面

这种要怎么实现呢请教了我还是个菜鸟不大懂CSS

回复 ↓
- kily 在 2010年5月17日21:21 说：
  
  @Garyjm 我不是很清楚你的意思！大概是这样吧！你的意思是移动到某个选项时显示子项内容但移开时显示默认是吧？如果是这样的话那就得用onmouseover和onmouseout事件了，嵌套上onclick事件就差不多了，这个具体可以google下看看，原理都是大同小异的!
  
  回复 ↓
xiangxirenjingyou 在 2010年5月13日20:40 说：

不用JS也可以实现的吧?

回复 ↓
garygao 在 2010年4月9日00:23 说：

document.getElementsByTagName(“li”)[n].className = “”;

如果在menu前有LI出现会出现什么情况了？<=IE8试试。

回复 ↓
garygao 在 2010年4月8日02:01 说：

很好的代码越简单越好

回复 ↓
sun 在 2010年3月28日13:31 说：

确实不错，哈哈在blueidea看到这个教程链接到你的BLOG，代码很简单效果很漂亮！支持你！呵呵

回复 ↓
问鼎天下在 2010年3月24日11:00 说：

更改了　active 的对应一级目录，但是二级目录始终在第二个．无法自动匹配！机关在哪里，我还没找到！非常感谢

回复 ↓
- kily 在 2010年3月24日11:35 说：
  
  @问鼎天下改了active的class后要在CSS里把相应的显示设置成隐藏就行了。默认的是第二个隐藏，你改成你想要的就成！
  
  回复 ↓
  - 问鼎天下在 2010年3月25日00:41 说：
    
    原来机关在
    .sub-item { display:none;}
    #sub-item1 { display:block;}
    这里，非常感谢！
    kily是否考虑完善一下这个菜单的记忆功能用COOKE来判定用户的选折！期待！
    
    回复 ↓
    - kily 在 2010年3月25日08:45 说：
      
      @问鼎天下呵呵。这个我就不会了，JS我还真是菜鸟。不过我以前写过一个关于视觉标识的静态实现方法，应该和你想要的效果一样。你可以参考一下：
      http://www.keelii.com/css-visual-sign/
      
      回复 ↓
问鼎天下在 2010年3月24日10:44 说：

问题有两个,第一是此导航虽然能实现无数个一级栏目但是只支持到第9个一级目录下的二级目录能显示,超过9个的一级目录便无法显示二级目录了.第二是导航加上真正的链接后一直会跳会到 active无法辨认当前点击的菜单项！

回复 ↓
问鼎天下在 2010年3月22日22:00 说：

这个菜单到第10个就无法显示了！

回复 ↓
- kily 在 2010年3月22日22:39 说：
  
  @问鼎天下具体是什么情况说清楚我看看。
  
  回复 ↓
Pingback 引用通告：精巧支付宝导航条制作教程 - 网来网去-http://www.webcomgo.com专注互联网分析、SEO、电子商务、管理营销、GTD、生活日志爱皇冠乐淘淘
daiyibai 在 2010年3月11日10:57 说：

期待你的联系方式，最好是QQ

回复 ↓
daiyibai 在 2010年3月11日10:56 说：

在吗我急事找你，我用了这代码遇到问题，想请教

回复 ↓
- kily 在 2010年3月11日11:51 说：
  
  @daiyibai 我发邮件了！看博客about里面。
  
  回复 ↓
Sawyer 在 2010年2月25日12:44 说：

嗯，有源码下载就好。
看来JS是一定要学了，唉。。。
谢谢分享咯！

回复 ↓
nobird 在 2010年2月12日02:25 说：

突然想到…到支付宝那copy一个最容易…–

回复 ↓
元胜在 2010年2月9日14:01 说：

学习了！！

回复 ↓
阅城在 2010年2月7日23:49 说：

下载链接好差劲。。下了一点不走了

回复 ↓
- kily 在 2010年2月8日11:41 说：
  
  @阅城不会吧？我这儿挺快的呀！别用迅雷下载就问题的。这个本来就很小的。
  
  回复 ↓
阅城在 2010年2月7日23:47 说：

学习了，真不错，前阵子看的那个导航比较简单，这个正好弥补了~嘿嘿，收藏了。

回复 ↓
大顾在 2010年2月6日20:10 说：

支持一下哦，欢迎回访。 =）

回复 ↓
天下免费在 2010年2月6日10:50 说：

如何把这种菜单用于wordpress主题上？

回复 ↓
- kily 在 2010年2月6日14:33 说：
  
  @天下免费这个我到真没研究过，不清楚wp导航的内部结构。不过有一个比较简单的方法，直接copy我的代码然后修改链接就可以。缺点就是不够灵活。要想完美的话就得多研究一个wp的结构了。
  
  回复 ↓
Firm 在 2010年2月4日21:33 说：

难道这就是传说中的高手

回复 ↓
- kily 在 2010年2月4日22:46 说：
  
  @Firm 呵呵。太言重了吧，这个只要好好看看大家应该会懂的吧！
  
  回复 ↓
huangjun 在 2010年2月4日16:21 说：

遇到这个，我通常直接去alixixi下载源代码。

回复 ↓
- kily 在 2010年2月4日18:29 说：
  
  @huangjun 呵呵。花几分钟直接学会不就不求人了么^!^
  
  回复 ↓
nobird 在 2010年2月4日00:35 说：

还是jq易懂些，zblog集成了那个玩意…

回复 ↓
- kily 在 2010年2月4日15:14 说：
  
  @nobird 做一些漂亮效果时用Jquery的确简单，不过要想写出优秀的代码还好要有好的JS基础^!^
  
  回复 ↓
wuleilei 在 2010年2月3日20:47 说：

支付宝的那个菜单的确不错~~

回复 ↓
- kily 在 2010年2月4日15:14 说：
  
  @wuleilei 呵呵。咱这个也还可以吧？
  
  回复 ↓
  - wuleilei 在 2010年2月8日16:58 说：
    
    呵呵，肯定可以啊~~
    
    回复 ↓
安在 2010年2月3日15:37 说：

我觉得我如果仔细看也许会看明白，不过我不想明白==

回复 ↓
- kily 在 2010年2月3日17:54 说：
  
  @安呵呵。别把自己搞得那么纠结，想看就看看，不想看就看点想看的^!^
  
  回复 ↓
飞晏在 2010年2月3日15:30 说：

换个颜色做成蓝色的好看嘿嘿

回复 ↓
- kily 在 2010年2月3日17:55 说：
  
  @飞晏这个好办，把原图片放到PS里面调一下色调就行了。
  
  回复 ↓
hiro 在 2010年2月3日12:59 说：

有BUG，你点到最后的“商家服务”后，再点其他的，“商家服务”没有失去active。貌似n<7就对了

回复 ↓
- kily 在 2010年2月3日14:43 说：
  
  @hiro 呵呵。感谢提醒，这一点我还忽略了哈，估计小学算术没学好^!^
  
  回复 ↓
kily 在 2010年2月2日22:53 说：

@林西老九呵呵。慢慢看，我搞了老半天呢！

回复 ↓
万戈在 2010年2月2日22:02 说：

这个不错，加星标注了

回复 ↓
- kily 在 2010年2月2日22:43 说：
  
  @万戈呵呵。这个得加几星呀？
  
  回复 ↓
林西老九在 2010年2月2日19:34 说：

嗯，好好看看，也学习一下

回复 ↓

Kily's Blog

calls me kily

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

《精巧支付宝导航条制作教程》上有 50 条评论

发表评论取消回复

《精巧支付宝导航条制作教程》上有 50 条评论

发表评论 取消回复

发表评论取消回复