Add LavaLamp Menu to iNove Theme
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. ![]()

sha fa
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.
Ok, now with inove 1.4, I find it !
Thanks.
hi and thanks for your effort. it’d be nice if you’d offer a download with the source code. thanks again and greetings.
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?
Here I put a picture of the problem
http://i86.servimg.com/u/f86/12/26/78/42/error10.jpg
Hello,
Sorry for my English. I had a question:
The submenus are accepted by Lavalamp?
Thank you.
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.
aha, .org is a beautiful and interesting widget, congratulations!
Hi, discriminative posts there
express’s concerning the compelling advice
THANK YOU!!!!
weee~~
i was looking for a similar tutorial for long time thanks wu
Marked by dfwolf, will continue to look for more questions here~
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?
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
Also the templates/end.php file is not incuded in the 1.4.5 version of Inove…
@Matt
I have updated iNove theme and removed templates/start.php and templates/end.php, now you can find
wp_headin header.php andwp_footin footer.php.Oh~~this is awsome, english version. But why don’t use neoease.net for english version. org for a group people.
@Matt
安全套大叔?
where code ??in my header.php not found…help me…whrer menu.js???in my theme files not found….help…
i can made menu bar…editing…how to make the menu bar? based on what? category or not ..?help post please help me
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.
very good article
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. ,
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.
the “” in the header.php menu. im using Inove 1.4.6
is it possible to add dropdown categoy menu in navigation ?
thanks for tutorial..