日期:2013-08-18  浏览次数:20646 次

引见领取宝导航条的制造过程,这类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选项卡)。

友情链接: 爱易网 云虚拟主机技术 云服务器技术 程序设计技术 开发网站 APP开发教程
Copyright © 2013-2024 爱易网页 当前在线:390人  网站在57分50秒内访问总人数:8550人 当前 37.71%  粤ICP备18100884号-2