在主题中添加 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
    Aug 13th, 2009 at 01:25

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

  2. RenHai | #202
    Aug 16th, 2009 at 08:58

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

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

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

  3. mg12 | #203
    Aug 16th, 2009 at 12:04

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

  4. jundu | #204
    Aug 20th, 2009 at 20:04

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

  5. John | #205
    Aug 26th, 2009 at 00:03

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

  6. Rui | #206
    Sep 4th, 2009 at 21:47

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

  7. unixhater.com | #207
    Sep 24th, 2009 at 21:42

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

  8. hufhi | #208
    Oct 14th, 2009 at 01:08

    蛮好的啊

  9. Lee | #209
    Feb 7th, 2010 at 18:48

    评论的功能很利害啊

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

Twitter Email feed
RSS feed