Add LavaLamp Menu to iNove Theme

May 11th, 2009 | Tags: , , , ,

LavaLamp effect is an excellent technique to turn the navigation to a flash like animation, it was originally written by Guillermo Rauch for Mootools and somebody had written a nifty LavaLamp menu for jQuery.

I have written an article about ‘how to add LavaLamp menu to WordPress theme‘, but it’s Chinese. I know somebody need this, but they can’t read Chinese, so I will tell you step by step how to add LavaLamp menu to iNove theme.

Follow me…

1. Get LavaLamp code that I have modified
Download lavalamp.js and put it to js directory.

2. Add menu background
Download lava.gif and put it to img directory.

3. Import jQuery library
Find <?php wp_head(); ?> in header.php file and insert the following line before it.

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

4. Load LavaLamp menu
Insert the following lines before </body> in footer.php file.

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>

5. Remove unwanted element
Remove the following line in templates/header.php file.

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

6. Change activate action of menus
Open your js/menu.js file and change the activate function.

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);
}

Find new GhostlyMenu(list[i], align, 1, 1); in the same file and change it to new GhostlyMenu(list[i], align, 1, -1);.

7. Remove outdated CSS
Find and remove all the CSS code start with #menus in style.css file.

8. Add new CSS
Append the following lines to style.css file.

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;
}

Welcome to NeoEase.org! this is my first article. :)

  • Share/Save/Bookmark
  1. May 11th, 2009 at 17:14
    Reply | Quote | #1

    sha fa

  2. May 11th, 2009 at 20:22
    Reply | Quote | #2

    Hi !

    I don’t find the code “new GhostlyMenu(list[i], align, 1, 1);” in the file menu.js of the theme inove.
    There is only a part of code like this : “new GhostlyMenu(list[i], ‘left’, 1, 1);”

    Can you change your tutorial to reflect all the changes you made in your theme like on your site ?

    Thanks in advance.

  3. May 12th, 2009 at 03:49
    Reply | Quote | #3

    Ok, now with inove 1.4, I find it ! ;)
    Thanks.

  4. MorseFire
    May 12th, 2009 at 15:36
    Reply | Quote | #4

    hi and thanks for your effort. it’d be nice if you’d offer a download with the source code. thanks again and greetings.

  5. May 14th, 2009 at 07:33
    Reply | Quote | #5

    Hi, thanks for the tutorial is very good
    I have a problem, when I see a blog entry, all menu items are “page_item”, none is “current_page_item”, then do not start mark

    What can I do to fix this?

  6. May 14th, 2009 at 07:34
    Reply | Quote | #6

    Here I put a picture of the problem
    http://i86.servimg.com/u/f86/12/26/78/42/error10.jpg

  7. Yoha
    May 14th, 2009 at 21:20
    Reply | Quote | #7

    Hello,

    Sorry for my English. I had a question:

    The submenus are accepted by Lavalamp?

    Thank you.

  8. Jo
    May 24th, 2009 at 06:41
    Reply | Quote | #8

    Hi, thanks for the clear information. Please could you tell me what software/program you use for editing your js file? I was trying in notepad but the file is not laid out as clearly as in your example. Thankyou.

  9. May 24th, 2009 at 21:29
    Reply | Quote | #9

    aha, .org is a beautiful and interesting widget, congratulations!

  10. May 24th, 2009 at 21:39

    Hi, discriminative posts there :-) express’s concerning the compelling advice

  11. June 2nd, 2009 at 20:27

    THANK YOU!!!!

    weee~~

  12. June 4th, 2009 at 00:34

    i was looking for a similar tutorial for long time thanks wu :)

  13. June 8th, 2009 at 11:40

    Marked by dfwolf, will continue to look for more questions here~

  14. June 8th, 2009 at 17:56

    I did this before but the menu is still the same unless when we mouseover the menu links up there, it turns like a tab is open .. Don’t know why.. But i’ve tried it like 3x’s already….

    Mind if you telling me why?

  15. Matt
    June 14th, 2009 at 04:49

    Hello,
    I am trying to follow the instructions, but can’t find the file:

    “3. Find in templates/start.php file and insert the following line before it.”

    Using Inove 1.45

  16. Matt
    June 14th, 2009 at 04:53

    Also the templates/end.php file is not incuded in the 1.4.5 version of Inove…

  17. admin
    June 15th, 2009 at 22:45

    @Matt
    I have updated iNove theme and removed templates/start.php and templates/end.php, now you can find wp_head in header.php and wp_foot in footer.php.

  18. June 28th, 2009 at 22:30

    Oh~~this is awsome, english version. But why don’t use neoease.net for english version. org for a group people.

  19. July 20th, 2009 at 13:50

    @Matt
    安全套大叔?

  20. August 3rd, 2009 at 22:12

    where code ??in my header.php not found…help me…whrer menu.js???in my theme files not found….help…

  21. August 3rd, 2009 at 22:31

    i can made menu bar…editing…how to make the menu bar? based on what? category or not ..?help post please help me

  22. August 13th, 2009 at 10:50

    Sorry but I don’t find the following line in menu.js : new GhostlyMenu(list[i], align, 1, 1);

    Thanks in advance for your help ! ;-) Your theme rocks.

  23. October 18th, 2009 at 22:18

    very good article

  24. October 23rd, 2009 at 06:18

    French into English, is a child born in the country of two citizen parents who have already entered into and become members of the society. ,

  25. November 11th, 2009 at 02:02

    First off, great theme. I want to add the lavalamp effect to my blog but i can´t seem to find the in the header.php section. I’m using Inove 1.4.6. Can you help me out?!

    tnx in advance.

  26. November 12th, 2009 at 00:30

    the “” in the header.php menu. im using Inove 1.4.6

  27. December 26th, 2009 at 15:00

    is it possible to add dropdown categoy menu in navigation ?

  28. February 27th, 2010 at 12:01

    thanks for tutorial..

  29. 2 trackbacks