WP Trick

在主题中添加 LavaLamp 菜单效果

Mar 27th, 2009 Add Comment

前些天我在博客上换上了 LavaLamp 的菜单效果, 很多朋友问我这个是怎么弄的, 下面我会手牵手教你的, follow me...

If you wanna English tutorial, please visit Add LavaLamp Menu to iNove Theme.

1. 下载经我修改过的 LavaLamp 代码
下载 lavalamp.js 文件, 并将文件放置到 js 目录.

2. 加载 jQuery 库
在 head 部分的 <?php wp_head(); ?> 前方添加以下代码: (一般主题可以在 header.php 中找到.)

<?php wp_enqueue_script('jquery'); ?>

或者

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

两个方法其实都是引用 jQuery 的 JavaScript, 有什么不一样呢? 前者是使用博客服务器上的 jQuery, 如果其他插件也要调用 jQuery 则无需两次装载代码; 而后者是使用 Google 服务器上的代码, 很多其他网站也使用这个文件, 所以它可能已被保存在本机 cache 中.

3. 加载 LavaLamp 菜单
</body> 前方添加以下代码: (一般主题可以在 footer.php 中找到.)

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/lavalamp.js"></script>
<script type="text/javascript">
jQuery(document).ready(
	function(){
		jQuery(function() {
			jQuery("#menus").lavaLamp({fx:"backout", speed:700})
		});
	}
)
</script>

注意: jQuery("#menus") 是找到 iNove 主题菜单的 ul 部分, 其他主题请替换为相应代码.

4. 在 style.css 中添加 LavaLamp 菜单的样式代码
如果你用的是 iNove 主题, 请下载 lava.gif 图片并放置到 img 目录中; 删除 style.css 文件中包含 #menu 的样式, 并添加下列 CSS 代码. 其他主题可能需要修改 CSS 代码.

#menus {
	position:relative;
	padding-left:10px;
	float:left;
}
#menus li {
	float:left;
	display:inline;
	list-style:none;
}
#menus li a {
	position:relative;
	color:#382E1F;
	height:30px;
	line-height:30px;
	padding:0 20px;
	text-decoration:none;
	font-size:11px;
	float:left;
	z-index:10;
	text-align:center;
}
#menus li.current_page_item a {
	font-weight:bolder;
}
#menus li.back {
	background:url(img/lava.gif) no-repeat right bottom;
	height:30px;
	position:absolute;
	z-index:8;
}
#menus li.back .left {
	background:url(img/lava.gif) no-repeat left top;
	height:30px;
	margin-right:9px;
	float:none;
}
#menus li ul {
	display:none;
	background:#F4F5F7;
	border:1px solid #CCC;
	border-top-color:#A6A6A6;
	padding:0 5px;
}
#menus li li {
	float:none;
	margin:0 !important;
	margin:0;
	padding:0;
	display:block;
	list-style:none;
}
#menus li li a {
	float:none;
	display:block;
	padding:7px 5px;
	text-decoration:none;
	width:200px;
	border-style:solid;
	border-color:#DDD;
	border-width:1px 0 0;
	margin:0;
	background-image:none;
	height:auto;
	line-height:145%;
	color:#999;
	text-align:left;
}
#menus li li.first a {
	border-top:none;
}
#menus li li a:hover {
	color:#382E1F;
}

5. 删除多余的代码 (针对 iNove 主题)
在 templates/header.php 中删除以下代码:

<li><a class="lastmenu" href="javascript:void(0);"></a></li>

6. 修改子菜单的 JavaScript 代码 (针对 iNove 主题)
打开 js/menu.js 文件并修改 activate 方法.

activate: function() {
	this.title.className += ' current';
 
	var pos = cumulativeOffset(this.title);
	var left = pos[0];
	if (this.align == 'right') {
		var offset = getWidth(this.title) - getWidth(this.body) + this.offset;
		left += offset;
	}
	var top = pos[1] + getHeight(this.title);
 
	if(this.offset == -1) {
		var pos2 = cumulativeOffset(document.getElementById('navigation'));
		left -= pos2[0];
		top -= pos2[1];
	}
 
	setStyle(this.body, 'left', left + 'px');
	setStyle(this.body, 'top', top + 'px');
	setStyle(this.body, 'visibility', 'visible');
	setStyle(this.body, 'opacity', this.opacity);
	setStyle(this.body, 'MozOpacity', this.opacity);
	setStyle(this.body, 'KhtmlOpacity', this.opacity);
	setStyle(this.body, 'filter', 'alpha(opacity=' + this.opacity * 100 + ')');
 
	if(this.tid) {
		clearTimeout(this.tid);
	}
	this.tid = setInterval(bind(this, this.appear), 20);
}

按照以上步骤操作应该不会有什么问题的, 而在不同的主题中可能需要修改的地方有两处. 一是第 3 步 #menus 可能要换成其他能找到菜单 ul 的路径; 二是第 4 步的 CSS 需要作针对性修改.

本文于 2009 年 5 月 15 日大幅更新!

参考资料: LavaLamp for jQuery Lovers

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 在主题中添加 LavaLamp 菜单效果

222 Comments 20 Trackbacks

Rui | Aug 13th, 2009 at 01:07

MG12，请教一个问题，我在博客里以前看到过，就是滑块回复到左边会出格的问题：
如图显示：http://i31.tinypic.com/2iuwavd.jpg

记得你在对某个网友的回复中提到过，今天翻遍了你的博客也没找到，希望能指教和修改添加到这个教程里面，谢谢
风雪残士 | Aug 8th, 2009 at 11:33

@mg12
刚刚去官方下了个 inove.1.4.6.zip 然后把menu.js直接放上去不做修改发现居然能显示lavalamp菜单 rss弹出菜单也正常了问题解决了谢谢楼上几位。

header.php也找到了原来在风格文件夹里面还一个themes文件夹囧

另 MG RSS弹出订阅你的有10个多了QQ跟豆瓣请问怎么添加我修改PHP文件用html代码会出错。。发现你是用函数调用的写不来
风雪残士 | Aug 8th, 2009 at 11:05

@bolo
恩这样就不会出错但RSS弹出订阅框就失效了纠结中。。
mg12 | Aug 8th, 2009 at 10:57

@风雪残士
那个函数来自 Prototype Frame, 作用是返回绑定的 action, 不知到为什么会发生异常, 因为以前没看到过这样的情况, 请下载最新版本试试可否解决问题. (更换 menu.js 就可以了)

@bolo
哈哈~ 你起床真早.
bolo | Aug 8th, 2009 at 09:13

@风雪残士
menu.js第99行产生了冲突，不知道该冲突所在的函数有什么用，删除相关函数应该没事了
风雪残士 | Aug 7th, 2009 at 23:45

@mg12
RSS Email feed Twitter 这一排安装这个鼠标经过RSS 这里就弹出订阅菜单然后IE下就显示脚本错误。 method为空演示见 http://blog.tkbbs.com/
我发现这里好几个写了网站的都这样

另你说的
5. 删除多余的代码 (针对 iNove 主题)
在 templates/header.php 中删除以下代码:
这文件应该是在这文件夹下吧
wp-content/themes/inove 我header.php文件里没找到你提供的代码下的是最新inove.1.4.5主题官网下的
今天刚从pjblog转换过来麻烦了
mg12 | Aug 7th, 2009 at 23:21

@horlie
貌似这个都好一直没缺, 难道我发布的时候不小心弄掉了? 现在的版本应该没问题吧?

@江湖奇人
因为不能获取当前分类, 需要改写后台代码, 或者用 JavaScript 找到当前分类, 再到菜单中设置相应的 class.

@假面
这个教程经过 3 次修改了, 应该没问题, 并且足够详细了. 请再试一次, 如果不行, 告诉我你的页面上发生了什么错误.

@Mr.坏
请下载新版本的主题试试.

@whisperer
哈哈, 效果出来就好了. 不知道就别管了.

@Rui
嗯, 修改过几次了.

@风雪残士
请说具体一点.
风雪残士 | Aug 7th, 2009 at 19:00

MG你好我按照你最新的文章修改后页面是显示成功了, 但有个问题鼠标移动经过RSS弹出框的时候就出现了method为空的脚本错误
Rui | Aug 5th, 2009 at 02:41

原来文章已经在5月份更新过，真是更加详细了，那个小方块的问题也有写进去，怪我不知道温故而知新的道理，谢谢MG
whisperer | Jul 29th, 2009 at 08:25

看着mg写的，很容易就做出这个效果来了~~

不过有一个地方不明白，
不知道css里的#menus li.back .left是干嘛的...
我没用它，
用它的话倒是不正常了，多一个背景出来~
Mr.坏 | Jul 16th, 2009 at 20:01

看来遇到问题的还不止我一个，就如http://7836605.cn/inove145-theme-lavalamp-modify/呵呵~mg12什么时候能官方的解决一下啊，期待！~
Mr.坏 | Jul 16th, 2009 at 17:32

@wincylin

汗，我反而觉得这样有感觉！~
现在我的问题是鼠标悬停在侧栏rss上，IE浏览器的状态栏会提示有错误。感觉自己也是按步来的啊，郁闷中..
wincylin | Jun 29th, 2009 at 12:09

你好。我补充一点。按照文中的步骤我完成了，但是在把滑块触发到后面以后移开，滑块回自动弹回去并超过边框，很难看，需要在css表中相应框体添加{overflow:hidden; }。
Justin | Jun 26th, 2009 at 10:30

@假面

这里下载 http://justin-tan.com/wp-content/uploads/2009/06/menu.zip
假面 | Jun 26th, 2009 at 10:27

@Justin
恩我开始就这么试的，但没找到，应该是我的menu.js里没这行代码的，你能把你的menu.js发给我吗？谢谢
Justin | Jun 26th, 2009 at 10:22

@假面

试试看打开 menu.js，按 ctrl+f，把 (new GhostlyMenu(list[i], align, 1, 1); ) paste进去找，找到了就换成 new GhostlyMenu(list[i], align, 1, -1)
假面 | Jun 26th, 2009 at 10:13

@Justin
恩，效果是实现了，缺少你的第七步，因为我在 menu.js找不到 new GhostlyMenu(list[i], align, 1, 1); ，结果是rss还是不能弹出
Justin | Jun 25th, 2009 at 14:48

@假面

我是按照以上的步骤：
1 - 下载 lavalamp 然后放进 js folder里
2 - 按照以上方法修改 header.php (是inove folder里的，不是template里的)。而且我使用的是 google 服务器上的代码。
3 - 按照以上方法修改 footer.php (inove folder 里的 )
4 - 下载 lava.gif 放进 img folder里，然后按照以上方法修改 style.css
5 - 按照以上方法修改 header.php (template folder里的)
6 - 按照以上方法修改 menu.js (js folder里的)

（站长可能漏掉了这个步骤，只有在英文版教学那里才有：）
7 - 在 menu.js 里找出 new GhostlyMenu(list[i], align, 1, 1); 然后换成 new GhostlyMenu(list[i], align, 1, -1);

这下就搞定了！希望你成功。
有空来看看我的网站。
假面 | Jun 24th, 2009 at 21:20

@Justin
1.4.5版本到底怎么实现这个效果的 start.php end.php没有没关系的吗？我的还是没效果但已经按步骤来了
假面 | Jun 24th, 2009 at 21:03

１.４.５就真的不能实现这个功能？即使start.php，end.php放到ｊｓ里？
假面 | Jun 24th, 2009 at 20:52

我用的是1.4.5版本，按部就班完成后还是没那个效果，并且在ＩＥ浏览器里提示我有错误，还有不管ＩＥ还是火狐　RSS都不能自动弹出
江湖奇人 | Jun 24th, 2009 at 17:52

当后台设置成分类作为导航条的时候就有一个BUG，点分类之后那个小方框不会停留在点击的分类上。怎么解决啊？？
horlie | Jun 22nd, 2009 at 15:32

@RenHai
2. 在 activate 方法最后 '}' 后少了个逗号。

由于mg12一直没空，所以我自己把目前问题和1.3版本的结合修复了一系列的小毛病，详细方法请参考我的博客。我在“inove1.4.5主题LavaLamp菜单栏修正”一文中引用了这篇文章的地址，朋友们可以参照对比斟酌之后修复。如有不尽人意的地方，还请包含，继续期待mg12有空之后改善。
mg12 | Jun 22nd, 2009 at 11:45

@Dreamer
1. 删除 style.css 文件中包含 #menu 的样式, 并添加下列 CSS 代码.
2. 全部替换
注意, 如果你没有把握自己的处理正确, 请先备份.
Dreamer | Jun 22nd, 2009 at 11:24

1.第四步中在style.css中找到两处#menus的代码,替换哪一处?
2.第六步"修改 activate 方法."是不是指将activate函数全部替换?

很支持mg12兄的inove主题,可是刚刚试着改lavalamp菜单效果最终还是失败了...
mg12 | Jun 22nd, 2009 at 11:21

@horlie
回头我看看去, 最近忙不过来了, 不好意思.

@horlie
谢谢帮忙说明.

@Dreamer
嗯, 貌似 box.net 挂了.

@RenHai
1. 请查看 169 楼朋友的说明.
2. 不能显示推荐列表证明你操作有错, 导致某些 JavaScript 脚本运行不正常.
RenHai | Jun 22nd, 2009 at 07:51

mg12 兄，发现两个问题。

1、我这文章中 lavalamp.js 和 lava.gif 下载的链接都打不开。

2、我的博客成功添加 LavaLamp 菜单效果后，当鼠标在订阅按钮上方时，不能显示推荐订阅器列表。这个问题貌似只有我有，记得为上个版本的主题添加 LavaLamp 菜单效果后也遇到了这个问题，一直不清楚问题出在哪？
Dreamer | Jun 22nd, 2009 at 01:33

搞定了..看了169楼同学的做法...深表感谢...
Dreamer | Jun 22nd, 2009 at 01:31

那个文件怎么下载不了?好像是该页无法显示
horlie | Jun 21st, 2009 at 15:03

问题demo效果看@Hermit 这位朋友的，地址：http://ixland.net/
horlie | Jun 21st, 2009 at 11:28

mg12兄，我已经给你发邮件了，请查收
horlie | Jun 19th, 2009 at 13:14

@azaza
是的，lavalamp.js下载的链接失效。还是有办法要的到的，打开C:\Documents and Settings\Administrator\Local Settings\Temporary Internet Files找到mg12同学的lavalamp.js
horlie | Jun 19th, 2009 at 13:11

@mg12
汗一个，可能我术语表达上不理想。再来说明一下，1.4.5demo在本机上的，也不能发图，再不行就发email。

一、目前能正常的情况是，我在jsmenu.js 中 activate: function() {.....},（注意逗号）方法最后加了逗号的。不加逗号就会出现浏览器左下角提示错误，在某行，缺少'}'的情况。

二、如果添加了新页面，并指定其父级，那么用加了逗号的方法时，就会出现样式撑坏菜单栏的情况。（我想是css样式的问题）不加逗号和上面一样的情况。
azaza | Jun 18th, 2009 at 18:39

效果真是不错，赞一个先~
不过为什么lavalamp.js下载的链接打不开啊
Arec | Jun 18th, 2009 at 11:47

horlie :
终于发现问题所在。activate方法句末加不加逗号都可以，只要页面无父级存在。如果有父级页面的，加了逗号就会出现问题。但是不加逗号的则出现我上面说的那个问题，页面会提示某段缺少‘}’的错误（实际上是不少符号的）。也就是说博客如果有父级导航菜单的朋友用起来会有点问题。望mg12今后改善，期待！

真的很赞，不过好像box现在现在很多时候都不行。
mg12 | Jun 18th, 2009 at 09:15

@Hermit
@bolo
感谢两位帮忙解答网友问题. 我已经更新文章了.

@horlie
你好, 不太明白你的意思, 可以给我个 DEMO 吗?
horlie | Jun 18th, 2009 at 04:02

终于发现问题所在。activate方法句末加不加逗号都可以，只要页面无父级存在。如果有父级页面的，加了逗号就会出现问题。但是不加逗号的则出现我上面说的那个问题，页面会提示某段缺少‘}’的错误（实际上是不少符号的）。也就是说博客如果有父级导航菜单的朋友用起来会有点问题。望mg12今后改善，期待！
horlie | Jun 18th, 2009 at 03:42

1.4.5非常奇怪的事情，我在别人的博客发现js/menu.js 中修改的 activate 方法句末可以加逗号，我的就不行！不加逗号效果能正常，但是网页一直会提示某某段错误缺少‘}’我已经郁闷了，只能用回老的版本，望指点迷津！
paxing | Jun 16th, 2009 at 21:37

顶一个！留个脚印！

真的挺漂亮的！有时间的时候来学习一下你的滑动部分的操作，太经典了。
Chuanle | Jun 16th, 2009 at 16:34

@Hermit
哈哈，谢谢你啊，本来我的页面载入完成后IE6会提示有错误，我找了半天js没发现错误到底在哪里，你这么一说我才发现我不小心在menu.js多加了一个大括号...
Justin | Jun 16th, 2009 at 09:25

@bolo
谢谢，我成功了
bolo | Jun 16th, 2009 at 09:06
@Justin
加到header.php的

后面
bolo | Jun 16th, 2009 at 09:04

@Justin
加到header.php的下面
Justin | Jun 16th, 2009 at 09:01

@bolo
但是我仍然无法修改以上教学的第2步骤，有什么办法？
bolo | Jun 16th, 2009 at 08:52

@Justin
1.4.5已经整合这几个文件了，打开inove目录的header.php修改就可以了
Justin | Jun 16th, 2009 at 08:09

@Hermit
1.4.5 版本的/templates/ 里面没有 start.php，没有end.php，
1.4.5 版本只有（两个） comments.php 和 header.php
1.4.5 版本的 header.php 里找不到

所以就算我把 1.4 版本的 start,end,menu 抄进 1.4.5 也是无法做出 lavalamp效果
Hermit | Jun 15th, 2009 at 23:06

@渴慕晨光
改过Lavalamp吗？改过的话检查menu.js里activate方法末尾有没少个逗号。
如果不行就发邮件问mg12吧，我能力有限，只能帮到这里。
Hermit | Jun 15th, 2009 at 22:58

@Justin
start.php header.php
end.php footer.php
Justin | Jun 15th, 2009 at 22:53

我想知道 iNovo 1.4.5 版本没有 start.php 和 end.php 和 page.php, 我要如何修改？
Hermit | Jun 15th, 2009 at 21:57

@水利小组
后台当前主题设置里应该有相关选项。

Comment pages

« Previous 1 2 3 4 5 Next »

Add Comment Read Article

WP Trick

在主题中添加 LavaLamp 菜单效果

JavaScript, jQuery, Tutorial, WordPress