JQuery 实现动感导航菜单

万戈 2010.02.25 发布于：电脑网络 7,245 次践踏

完了完了，我已经彻底沉迷于 JQuery ，后天就要开学了，就没有时间再这么折腾了，我可怎么办呀。今天早上爬起来就把以前错过的 JQuery 文章翻看了一遍，每看到一个帅气的效果就手痒痒想加到 WordPress 中，不过我真的已经在主题上用了不少 JQuery 特效，只能挑一些精简的代码加上。

就在前天，我的导航菜单用上了 Javascript 滑动导航效果，说实话这效果真是不错，只是可惜我一直没有解决如何使二级导航菜单滑动，不是很完美，所以忍痛割爱，而传说中的 lavalamp JQuery 效果也不能完美解决这个问题，只好寻觅其他的 JQuery 导航菜单的效果。

皇天不负有心人，终于让我又挖到了一个 JQuery 的导航特效，效果就看我现在的导航栏吧，鼠标移上去试试，连二级菜单也有哟～而且这个 JS 代码比 lavalamp 还要简短，太帅了！方法来自一个老外的网站：《Animated Menu Using jQuery》

翻译加整理如下：

1、HTML 部分

<div id="menu" class="menu">

    <ul>

        <li><a href="javascript:;">Home</a></li>

        <li><a href="javascript:;">Work</a></li>

        <li><a href="javascript:;">Services</a></li>

        <li><a href="javascript:;">Support</a></li>

        <li><a href="javascript:;">Contacts</a></li>

    </ul>

</div>

2、CSS 部分

.menu ul li a span{position:absolute;left:0;width:110px;}

.menu ul li a span.out{top:0;}

.menu ul li a span.over,.menu ul li a span.bg{top:-45px;}

#menu{background:#EEE;}

#menu ul li a span{color:#000;}

#menu ul li a span.over{color:#FFF;}

#menu ul li span.bg{height:45px;background:url(bg_over.gif) center center no-repeat;}

3、载入 JQuery

一如既往，推荐 JQuery 1.2 系列。

4、载入 JQuery 执行代码

$("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );

$("#menu li a").each(function() {

    $( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );

});

$("#menu li a").hover(function() {

    $(".out",this).stop().animate({'top':'45px'},250);

    $(".over",this).stop().animate({'top':'0px'},250);

    $(".bg",this).stop().animate({'top':'0px'},130);

}, function() {

    $(".out",this).stop().animate({'top':'0px'}, 250);

    $(".over",this).stop().animate({'top':'-45px'}, 250);

    $(".bg",this).stop().animate({'top':'-45px'},130);

});