在主题中添加 LavaLamp 菜单效果

前些天我在博客上换上了 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 中找到.)

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

或者

1
<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 中找到.)

1
2
3
4
5
6
7
8
9
10
<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 代码.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
#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 中删除以下代码:

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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 菜单效果
  1. Rui | #201
    2009-08-13 01:25

    啊~找到了~
    在 #navigation 上加上 overflow:hidden;
    就可以了~ :P

  2. RenHai | #202
    2009-08-16 08:58

    更新主题后,今天再次为主题添加 LavaLamp 菜单效果,发现:

    1、对于文章中 lavalamp.js 和 lava.gif 下载链接都打不开。除了169楼提供的方法外,还可以这样:只要将下载链接主域名更换为 Boxcn.net 即可正常下载。

    2、最后一步打开 js/menu.js 文件并修改 activate 方法中句末貌似少了逗号,我在修改时给加上了。记得以前为主题添加 LavaLamp 菜单效果时都没在意这一点,最后发现作业完后当鼠标在订阅按钮上方时,不能显示推荐订阅器列表,这次添加了逗号后此问题消失。

  3. mg12 | #203
    2009-08-16 12:04

    @RenHai
    逗号是分割符号, 和这个方法无关, 自己加上就可以了. :)

  4. jundu | #204
    2009-08-20 20:04

    lavalamp.js文件在哪下载啊?链接打不开。可以发个邮件给我么?万分感谢~

  5. John | #205
    2009-08-26 00:03

    这到底是什么效果啊。js的文件都无法下载。何故?

  6. Rui | #206
    2009-09-04 21:47

    MG, 请教一下,滑块左边溢出可以用“在 #navigation 上加上 overflow:hidden;”来解决。
    可是右边溢出到搜索栏该怎么解决呢?我截图显示了问题描述:
    http://i25.tinypic.com/ddz19t.jpg

  7. unixhater.com | #207
    2009-09-24 21:42

    感谢博主,已经弄好了,不过我想建议一下,那个js与gif图片还是不要放什么boxcn上,非常麻烦,因为在linux下命令行下wget下不了,况且这两文件也就那么小,不用这么省吧?

  8. hufhi | #208
    2009-10-14 01:08

    蛮好的啊

  9. Lee | #209
    2010-02-07 18:48

    评论的功能很利害啊

  10. delphi | #210
    2010-03-12 11:27

    你这么那么帅啊,我服了你了

  11. 海天无影 | #211
    2010-04-14 21:45

    我什么我的不滑动啊……

  12. loke | #212
    2010-06-20 23:50

    我按照你的教程操作 IE下有个错误 不知道为什么..

    行: 70

    字符: 2

    错误: 缺少 '}'

    代码: 0

  13. loke | #213
    2010-06-28 20:41

    loke :我按照你的教程操作 IE下有个错误 不知道为什么..
    行: 70
    字符: 2
    错误: 缺少 '}'
    代码: 0

    这个问题还没有解决 ...

  14. nero | #214
    2010-06-30 09:53

    前辈,谢谢你的教程,已经出现lavalam效果了,不过我发现导航栏的小屋图标变成了“首页”,我觉得可能是因为教程中第四步中“删除 style.css 文件中包含 #menu”时也删掉了#menus li a.home的原因,不过我添加了#menus li a.home之后“首页”这两个字就不见了,变成了一个空白区域。由于小弟不会一些语言,还望您抽出一点时间帮忙看看

  15. 都市小疯 | #215
    2010-08-21 21:35

    这个效果喔安装成功了,想问个问题,就是将分类列表作为菜单的时候,当选中某个分类后,背景又返回到首页的上面,能不能停留在当前的位置呢?

  16. Jack | #216
    2010-08-27 13:27

    按照你的教程做了,,一级菜单达到效果了,,,二级菜单跑天上去了。。。
    请问怎么解决呢,,俺不怎么懂代码,,只知道按步骤走,,,麻烦大大们帮忙解决一下。

Comment pages
1 ... 3 4 5 841
  1. 老K博客 » 今天做的几件事
    2009-05-08 16:22
  2. NeoEase.org » Add LavaLamp Menu to iNove Theme
    2009-05-11 01:46
  3. 小酒吧 » 在主题中添加 LavaLamp 菜单效果
    2009-05-23 22:21
  4. 愤怒的石头 » 本博客inove主题添加lavalamp效果,导航美丽滑动
    2009-06-07 14:31
  5. NEW blog Theme preview « Just.Blog
    2009-06-16 01:19
  6. 给主题做了一些小优化 | 流金岁月
    2009-06-16 23:10
  7. LavaLamp菜单效果 | Linux/Solaris Focus
    2009-06-17 00:51
  8. Just.Blog » NEW blog Theme preview
    2009-06-18 18:07
  9. Read ERN » 我的Blog改造
    2009-06-23 17:03
  10. RC Life » 添加 LavaLamp 選單效果
    2009-06-26 00:16
  11. » wordpress 美化与优化小记 2@unixhater.com | UNIX痛恨者
    2009-10-01 04:32
  12. WordPress美化 « A.T. Field
    2009-10-05 22:46
  13. 新佈景上架inove改版 | 漁仔的部落格
    2009-10-30 16:56
  14. Simple-Lines 沒有複雜編排 簡單、簡潔風佈景 | 香腸與楓葉
    2010-01-15 22:13
  15. 一款简单的lava lamp导航菜单(jQuery) - 上海北大青鸟软件工厂
    2010-05-26 09:44

Twitter Email feed
RSS feed