JQuery 实现动感导航菜单

  完了完了,我已经彻底沉迷于 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);
});

  其实上面这串代码还可以精简,但是就得根据不同的主题自己修改了,我只会改自己的主题,所以就不乱指点了。

  数了一下我当前应用于 Wordpress 的 JQuery 特效已经有10个了:

  1、JQuery 实现锚点链接之间的平滑滚动

  2、JQ 完善 Wordpress 友链的 Favicon

  3、Wordpress 之链接平移 JQuery 特效

  4、JQuery 实现页面载入中效果

  5、JQuery 实现带滑动层的图片展示效果

  6、JQuery 实现的 Tab 切换

  7、JQuery 实现新窗口打开评论者网址

  8、记录并隐藏 Wordpress 评论者信息

  9、免插件实现 Wordpress 嵌套评论 Ajax 效果

  10、就是本文介绍的 JQuery 实现动感菜单导航

  我的下一个目标是用 JQuery 实现二级导航菜单,我知道一定还有比现在更简短的代码可以实现,哦耶~我去折腾鸟~

本文已盖 81 层楼

  1. :arrow: 老万,能木能说详细点,关于
    1、HTML 部分(放在wp的哪个文件里?)
    2、CSS 部分(代码位置应该没讲究吧!?)
    3、载入 JQuery(这个倒是貌似会了)
    4、载入 JQuery 执行代码(这个怎么个载入法) :roll: 感激不尽。

    • 回复 万戈 说:

      1.html部分就是导航菜单的代码,在header.php中
      2.CSS部分是无所谓的,只要注意优先级就可以了,所以最好放在style.css的底部
      3.略过~
      4.这就是一段JS,可以将其另存为一个JS,然后在JQuery之后调用;或者也可以把这段JS合并在其他JS中一起,放在JQuery之后

  2. :eek: 我的主题连个导航都没有,没得用。。。。

  3. 回复 老七 说:

    老万现在这研究jq?

  4. 回复 迷失 说:

    效果很好很强大 :razz:

  5. 回复 rollom 说:

    万戈,现在完全是高人了,以后说不定可以靠这个吃饭的哦!

  6. 回复 星网 说:

    方法来自一个老外的网站............你都跑到国外去学习了!

  7. 回复 A.shun 说:

    我只是用上了评论嵌套和tab
    倒是感兴趣你那个分类菜单是怎么做的

  8. 回复 随影 说:

    现在 看着代码就是烦啊

  9. 回复 Firm 说:

    10个啊,研究了这么多

  10. 回复 卢松松 说:

    我看你就是完全沉醉在jquery里了

  11. 回复 闪闪的星 说:

    要开学了,这个月也快过了,博客马上就能建好了,我也很快就能得到杯具了——想到这里,我太高兴了!

  12. 回复 Google不爱我 说:

    出个手机版的吧,昨晚在火车上上来看,谋杀了最后一点流量…… :arrow: :arrow:

  13. 回复 iBoluo 说:

    :arrow: 果然是上瘾了
    可惜我看不懂

  14. 回复 疾风 说:

    你这个导航看起来跟FLASH一样 很酷啊 呵呵~

  15. 回复 sosohehe 说:

    提个建议 你的博客可以加一个运行代码的插件 这样读你文章的人可以更直观的看看效果

  16. 回复 江流 说:

    完了完了 连续好几篇文章插不上话了

  17. 回复 LAONB 说:

    本来是过来看看你的页面宽度的,没想到,我的竟然比你的还宽10px :cool:

  18. 回复 kenshin 说:

    啥也不说了,直接膜拜 :eek:

  19. 回复 猴子 说:

    老万很爱玩JQ啊 :shock:
    我也跟着学学,嘿。

  20. 回复 hzlzh 说:

    见证了你的全站 JQ ,继续加油啊!我也去做做有时间

  21. 回复 苏扬 说:

    见识了。。不过这种特效很早就不玩了 华而不实给人感觉

  22. 友情提示:
    立刻查看自己的sitemap.xml文件,会有惊喜哦。

  23. 回复 rusaer 说:

    哇,万戈成专家啦!好久没来了,看见你好多文章都是技术哦,现在没太多时间上网了,不能每篇仔细的看了,到时候要用的时候直接把你这当百科全书了,直接站内搜索 :!:

  24. 回复 newcoin 说:

    几日不见,功力大增了啊 :mrgreen:

  25. 回复 路人假 说:

    二级菜单出来的时候好闪。。。

  26. 回复 Nox 说:

    不错不错,效果都很好。

  27. 回复 619 说:

    二级不太动感,一级很帅 :idea:

  28. 回复 午夜 说:

    :arrow: 完美盖完10楼,锁屏,外出觅食。 :!:

  29. 回复 午夜 说:

    还没人来插队吗?长江,长江,我是黄河。

  30. 回复 午夜 说:

    吃好了。
    这里是8楼。

  31. 回复 午夜 说:

    我吃个芒果再慢慢看文章。 :wink:

  32. 回复 午夜 说:

    JQuery 特效真是迷人。
    :grin: 菜单够动感。

  33. 回复 午夜 说:

    童鞋们, :mrgreen: 打雷收衣服了。

  34. 回复 午夜 说:

    :eek: 人呢,都吃饭去了?

  35. 回复 午夜 说:

    地板我也要包。

Leave a comment

您已输入0

三言两语

我的生活心情语录

工作手札

路漫漫其修远兮

精品推荐

好东西要分享

嘻哈娱乐

八卦趣事一笑而过

电脑网络

全新技术尽搜罗

转来载去

文人墨客美文赏析