当前位置：首页 → 问答吧 → 精巧支付宝导航条制作教程

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

时间：2010-03-10

来源：互联网

原文：http://www.keelii.com/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选项卡)。

复制内容到剪贴板

代码:

JS代码就不多做解释了，重要部分我已经给出注释。因为我也是菜鸟，费了很大劲才实现效果，还希望高手多多指点。

CSS代码有点小多我就不贴出来了，其实核心代码就那几句，主要为了仿制得完美就得多写一点啦！有兴趣的同学直接下载我的源码研究。有什么问题直接给我留言^!^

最终效最终果预览

代码及原素材下载

作者: keelii 发布时间: 2010-03-10

其实还可以再发挥到极致的，链接没有用滑动门噢，要是也改为滑动门就好了。
另外，不要用window.onload，IE有时候要等背景图片加载完毕才会执行，最好的办法是用JS库或者在</html>执行。

另外似乎 id="item1"这种方式类推起来太辛苦了呢！