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>
<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;}
.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);
});
$("#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个了:
9、免插件实现 WordPress 嵌套评论 Ajax 效果
10、就是本文介绍的 JQuery 实现动感菜单导航
我的下一个目标是用 JQuery 实现二级导航菜单,我知道一定还有比现在更简短的代码可以实现,哦耶~我去折腾鸟~
-
WordPress 3.0 菜单功能支持二级菜单2010年08月29日 -
精简版的 LavaLamp JQuery 滑动导航2010年06月6日 -
利用 JQuery 实现图片显隐特效2010年04月8日 -
JQuery 鼠标提示特效之 Sweet Titles2010年03月14日
相当给力啊,偷懒的我直接去作者主页DOWNLOAD代码
我有一个问题,HTML 的部分放在那里呢?
这个功能和我现在用的主题 貌似有一点 冲突似地。
···CSS样式需要进行修改。··
呃。。。HTML就是放在你想要实现的位置
JQuery 实现二级导航菜单来篇这样的
1、HTML 部分(放在wp的哪个文件里?)
2、CSS 部分(代码位置应该没讲究吧!?)
3、载入 JQuery(这个倒是貌似会了)
4、载入 JQuery 执行代码(这个怎么个载入法)
1.html部分就是导航菜单的代码,在header.php中
2.CSS部分是无所谓的,只要注意优先级就可以了,所以最好放在style.css的底部
3.略过~
4.这就是一段JS,可以将其另存为一个JS,然后在JQuery之后调用;或者也可以把这段JS合并在其他JS中一起,放在JQuery之后
老万现在这研究jq?
恩,爱上JQ了
效果很好很强大
呵呵,谢谢,最近折腾的JQ特效比较多
很不错的效果。
万戈,现在完全是高人了,以后说不定可以靠这个吃饭的哦!
呵呵,只能说是兴趣,还不能当职业
方法来自一个老外的网站............你都跑到国外去学习了!
好的技术大多来自国外~
我只是用上了评论嵌套和tab
倒是感兴趣你那个分类菜单是怎么做的
这是这个主题作者的教程,你可以看一下:
http://zeuscn.net/archives/2008/12/18/single-level-dropdowns-for-wordpress.html
谢了~
现在 看着代码就是烦啊
呵呵,我看着代码就是乐啊
10个啊,研究了这么多
其实还想加一些的,就怕影响速度
我看你就是完全沉醉在jquery里了
恩,没错,我为JQ狂
要开学了,这个月也快过了,博客马上就能建好了,我也很快就能得到杯具了——想到这里,我太高兴了!
等着你的博客成为水的杯具吧
就算50M,我也不会放过你
等着围观……
出个手机版的吧,昨晚在火车上上来看,谋杀了最后一点流量……
可惜我看不懂
上瘾了吧?
恩,确实上瘾了,哈哈,JQ很好玩啊
你这个导航看起来跟FLASH一样 很酷啊 呵呵~
嘿嘿,谢谢,要的就是这个效果
提个建议 你的博客可以加一个运行代码的插件 这样读你文章的人可以更直观的看看效果
啊哈,建议不错,不过我有免插件的运行代码方法:
http://wange.im/run-code-in-wordpress-without-plugins.html
写过教程,但一直没用,哈哈
完了完了 连续好几篇文章插不上话了
...看来我要改改风格了
本来是过来看看你的页面宽度的,没想到,我的竟然比你的还宽10px
其实960px应该是标准
啥也不说了,直接膜拜
呵呵,不用啊,我也是别人那里看来的~
老万很爱玩JQ啊
我也跟着学学,嘿。
已经玩到头了,再加就要影响载入速度了
见证了你的全站 JQ ,继续加油啊!我也去做做有时间
恩,还有不少地方有待完善呢,嘿嘿
见识了。。不过这种特效很早就不玩了 华而不实给人感觉
JQ特效都是华而不实的
万戈的回复我没看懂肋,是肯定我的回复 还是在批评?
呵呵 有错误 批评是很正常的一件事情啊
友情提示:
立刻查看自己的sitemap.xml文件,会有惊喜哦。
...last change 1999-11-30 00:00
这么早就博了···
比你看到的更早
老弟够坚挺···
哇,万戈成专家啦!好久没来了,看见你好多文章都是技术哦,现在没太多时间上网了,不能每篇仔细的看了,到时候要用的时候直接把你这当百科全书了,直接站内搜索
专家不敢当,喜欢的话就常来看看哈~
几日不见,功力大增了啊
呵呵,啥功力呀,都是网上拼拼凑凑来的
够帅!
哦耶~木木都认可了
二级菜单出来的时候好闪。。。
二级菜单还是有点问题,还需修改
不错不错,效果都很好。
接到报告,二级菜单还是有问题~
文盲来围观
同上
二级不太动感,一级很帅
二级也动感,只是在FF下有点问题
的确如此
还没人来插队吗?长江,长江,我是黄河。
吃好了。
这里是8楼。
我吃个芒果再慢慢看文章。
JQuery 特效真是迷人。
菜单够动感。
童鞋们,
打雷收衣服了。
地板我也要包。
板凳
沙发
吃饭回来,现在流行沙发板凳地板一起占呀,哈哈