LavaLamp With Submenus in WordPress

By Cory Hekimian-Williams on Mar.17, 2009, under Programming

Adding Submenus with the Correct Default Menu Item

I was playing around with LavaLamp while making this website and I found that there was an annoying bug where submenus would make the sliding image scroll all the way to the left. Reading the comments on Ganeshji Marwaha’s blog I found that you could make a small change to the jquery.lavalamp.min.js file to fix it. Another problem I found was that after clicking a link in the submenu the child page would load with the sliding image going to the first menu item instead of the parent of the current page.

I’ll show the quick and easy way to fix this glitch, then later in the post I will go into some more detail about making it work with WordPress.


Getting Rid of the Slide Glitch

To fix the sliding glitch, open the jquery.lavalamp.min.js, then navigate to the line that says:

$li.not(".back").hover(function(){move(this)},noop);

Change it so that it says:

$li.not(".back").mouseover(function(){move(this)},noop);

Save this file and it should prevent the annoying glitch when you hover over sub menus.

Making it work in WordPress

This is all fine and dandy, but if you are in WordPress you have probably noticed that no matter what page you are on, the sliding image always defaults to the first menu entry. This is because the LavaLamp menu is looking for a menu item that has a class attribute of “current”, and none currently do. In WordPress you are most likely making a call to either  wp_list_pages() or wp_list_categories() to display the menu items.

Wordpress tags the current page with the class attribute “current_page_item“, and the current category with the class attribute “current-cat“. You also might want to note that the parent of the current category gets the class attribute “current-cat-parent.”

If you want the image to hover behind the current page’s menu item by default, you will need to choose one of those class attributes and make the following change to the jquery.lavalamp.min.js file:

Setting the Default Menu Item

To fix the default menu item, open the jquery.lavalamp.min.js, then navigate to the line that says:

curr=$("li.current", this)[0]||
$($li[0]).addClass("current")[0];

You should replace both instances of current with the correct class attribute you are using. So if our menu was listing our static WordPress pages we would change the line to:

curr=$("li.current_page_item", this)[0]||
$($li[0]).addClass("current_page_item")[0];

If our menu is listing the categories we would change the line to say:

curr=$("li.current-cat", this)[0]||
$($li[0]).addClass("current-cat")[0];

We can even get fancier with this modification. Lets say you have a category menu with a drop down list. We can set this correctly by using the following line:

curr=($("li.current-cat", this)[0]||
$("li.current-cat-parent", this)[0])||
$($li[0]).addClass("current-cat")[0];

And lastly, the way I use it on my website I have actually merged the menu so that both my WordPress pages, and my categories are all listed. I needed to add the following line to make it behave correctly.

curr=(($("li.current-cat-parent",this)[0]||
$("li.current-cat",this)[0])||
$("li.current_page_item",this)[0])||
$($li[0]).addClass("current_page_item")[0];

This last line will set the default menu item to the current categories parent if it exists. If it doesn’t it will look for the current category’s menu item. Lastly if neither of those are found it must be on a static page so it looks for the current page’s menu item.

Feel free to leave a comment with your feedback, suggestions, or requests etc.

:, ,

91 Comments for this entry

  • Scott
    April 2nd, 2009 on 7:31 pm

    Hi Cory,
    Great article! Thank you for taking the time to post this, with your detailed instructions.

    I haven’t tried this yet, but look forward to it.

    This would make a nice plugin for WP ;-)

  • Cory Hekimian-Williams
    April 3rd, 2009 on 1:07 am

    Thanks for the comments.

    I would make it into a plugin for WP if I could figure out how. I can’t figure out a way to make the menu css generic enough.

    It might end up happening though since I like the effect and I want to put it on a few different sites that I have…

  • Serway Jewett
    April 8th, 2009 on 4:47 am

    You rock. World needs more souls like you.

  • Play Download Games
    April 8th, 2009 on 2:53 pm

    Thanks for cool article. When you get the chance check out my game blog for great related information and drop a comment.

  • Johan
    April 16th, 2009 on 5:15 am

    Hello!
    I’m having problem to implement the lavalamp menu to my wordpressblog. The ‘Lava’ wont show. First I had problems linking the javascripts, but thats allright now. Now I need to start the lavascript, but the lava in the back wont show… Can you please help me? :)

    Greetings from Sweden.

  • Cory Hekimian-Williams
    April 16th, 2009 on 9:12 am

    You most likely have a problem in your css. Try copying the menu css from one of the examples the author provides. Also make sure the path to the background image is correct.

    Good Luck

  • Johan
    April 16th, 2009 on 11:26 am

    But the funny thing is when I use the script in a html document with all the same settings it works. But not when I implement it in Wordpress. The CSS seems right, but the ‘lava’ never shows…

  • Cory Hekimian-Williams
    April 16th, 2009 on 7:37 pm

    Yeah I don’t really discuss how to install the lavalamp menu, it can be kind of tricky depending on your active theme. If you send me a link to the site I’ll let you know if I see anything obvious but I can’t make any promises.

  • blackproof
    April 21st, 2009 on 1:51 pm

    well i needed some help from you as i cannot seem to integrate it in my website , there seem to be a css conflict or so . can you add me on yahoo devil_03_12@yahoo.co.in so that we can solve the problem as i also want to know how you integrated in the theme

  • blackproof
    May 4th, 2009 on 12:40 am

    ok i got the menu working but there seem to be a problem i cannot get it working with child pages, how does it work on your website so fine, can you give me the code that you use on your website that makes it work fine

  • n
    May 6th, 2009 on 10:41 pm

    Hi there, I’m no coding wiz so I would like to know if there is a step by step tutorial to make this plugin work in a wordpress theme. I have the lavalamp-0.2.0 folder but do exactly don’t know what to do with it. I have made the all fixes, but I just don’t know where to place codes and don’t know how to make theme communicate with on another. Like I said I have no coding experience so forgive my knowledge base.

    Thank you

  • Jack
    May 6th, 2009 on 11:46 pm

    Thanks for the help. For some reason, I can’t get it to work using the easing.1.3.js version. The other version, easing.min.js, worked fine for some reason. Any who, thanks for posting.

  • Cory Hekimian-Williams
    May 7th, 2009 on 3:31 am

    I’m glad you guys are figuring it out :)

    @blackproof I discuss the children pages in the “Setting the Default Menu Item” section of the article.
    You need to look at the source to your template and figure out what value is being appended to the class tag of the current page’s menu link.

    -Good luck

  • Vin Thomas
    May 7th, 2009 on 3:34 pm

    You rock! Thanks for this tip!

  • Joey
    May 9th, 2009 on 2:26 am

    My question is… how do I get categories to show on the menu and how to get sub menus for them along side of Page menu items.

  • justin
    May 10th, 2009 on 2:30 am

    Hello All,

    I am having trouble implementing Lava into this wordpress theme called “Grid Focus” (http://5thirtyone.com/grid-focus) As you can see, the lava blocks out my text. I want it to be like the links (FRONTPAGE and BROWSE) so when lava is over it, the text turns white. I can supply my css if you need. Thanks for any help.

  • Jack
    May 13th, 2009 on 9:15 am

    Thought I’d update my last post. I forgot that the function names changed in easing.1.3.js so you have to use ‘easeOutBack’ instead of ‘backout’ or I guess you can use the compatability code offered on the easing plugin website..but i’m too lazy

  • Gerb2009
    May 26th, 2009 on 3:33 pm

    Thanks for the great tip! It worked perfectly on my blog!

  • Raymond Karlsen
    May 31st, 2009 on 7:22 pm

    Thanks for writing this article. It’s great (for me!) that you took the time to give these instructions, cause they helped me a lot. Thank you!

  • Friendlyin
    July 8th, 2009 on 12:11 pm

    great modification of lavalamp. i planned to use lamalamp with submenu in my website. thanks for shared great article.

  • Ariyo
    July 19th, 2009 on 5:08 pm

    Hi and thanks for this article. I have a working Lava Lamp in my wordpress theme. However it only works in the first page (home) and does not show in any other WP static pages. I was wondering that if you could possibly point me to the right direction. Thanks!

  • Sienna
    July 25th, 2009 on 11:29 am

    I am very impressed with your site. The quality of the design and content makes it a real winner! Thanks again for a great site and a great resource.

  • Cory Hekimian-Williams
    August 2nd, 2009 on 11:19 am

    Sorry for the delayed responses, I’ve gotten busy recently.

    Justin, if the image is covering the text you might need to play with the z-level property

    Aryio I looked at your website’s homepage and didn’t see a lavalamp so I can’t really help that much. If I had to guess though you are putting the code for the lavalamp in the wrong theme file.

    Joey, to get the links to show up in the menu you will need to modify the theme file and add the commands to display the desired types of links. For this site I used the following lines…

    < ?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?>
    < ?php wp_list_categories('sort_column=name&title_li=&depth=2'); ?>

  • tom
    August 22nd, 2009 on 9:17 am

    hi cory,

    thanks for the tutorial. worked almost perfect for me.

    i added the categories to my menue but there is still one problem left. i cant figure out how to force the little arrow following the rest. it works perfectly with “pages” in the menue but not with “categories.

    http://img43.imageshack.us/img43/508/issuelava.jpg

    cheers, tom

  • Steve
    August 26th, 2009 on 5:09 am

    OMG thank you! I’ve been trying for ages to sort the slide glitch when using LavaLamp effect with a nested list / submenu. Your simple modification to the .js code was so simple and just works. thanks.

  • Tim
    September 17th, 2009 on 2:34 pm

    Awesome! I was beginning to wonder if this would work with WordPress. I do have one concern that is not fully working with my menu in IE. (Both IE7 and IE8) The wp_list_pages structure I’m using doesn’t include the home page. So when I’m not in any of the “current” pages, after mousing over the menu initially, the second time my mouse leaves the menu then try to roll over it again, the “lava” image doesn’t show back up. So in other words, it works the first time on a page refresh, but then after I pull away then mouse over again, the menu effect dies. Any idea why this is happening in IE? Firefox of course works fine. ;)

  • Dan
    October 22nd, 2009 on 2:08 pm

    Hey Everyone.

    I have used lavalamp many times in other wordpress themes. However, With my newest site that I am developing, the lavalamp does not work. I have gotten rid of all javascript and styling yet it still does not load.

    What is the conflict!?

    any ideas?

  • Chris
    October 26th, 2009 on 11:17 pm

    I have added this to my website but when I go to a sub page the lava image goes back to the home page instead of staying on the parent page. I already used this page to fix the slide glitch and changed the “current” to “current_page_item” in the jquery.lavalamp.min.js file. help?!?

  • ryan
    October 27th, 2009 on 3:29 pm

    Hello. Thanks for creating this post. I’ve been trying with no luck to add the lava lamp to a site. I was looking at what you had created and I see that you have a class .back to a li after your menu. I was wondering did you add that or is it added by the lava lamp js? I even tried copying your styles verbatim just to see if I was missing something and still to no avail. Any idea what I may be overlooking to fix this matter? appreciate it.

  • Afonso Ferreira Gomes
    October 28th, 2009 on 10:22 am

    Thank You !!

    I had this problem, found your site easily and solved the problem right at the first attempt!

    Appreciate it.

    Cheers,
    A.

  • ryan
    October 28th, 2009 on 11:51 am

    hello again. sorry about the last question. I decided to go through everything with a fine tooth comb and realized that the lava instructions talk about .back being added by the javascript. I then realized i had omitted the most obvious thing to get things working, the function call below the js calls. 9 times out of 10 the answer is in the details. Thanks again for creating this post.

  • abdul chalik
    October 29th, 2009 on 9:19 pm

    hey cory..great article….thanks alot…i got my menu working

  • moabi
    November 20th, 2009 on 3:23 am

    great article, thx so much for the help

  • Joe
    November 21st, 2009 on 3:38 pm

    Thanks a lot for that great article - it helped me alot.

    I’m currently working on a client’s project and tried to implement the lavalamp menu. With you modifications it was really easy to get it to work with wordpress.

    Now I have still to style the dropdown-menu. So, lots to do

    see ya=)

  • Gilian
    November 25th, 2009 on 11:17 pm

    Hi Cory do you know of any ways the lavalamp script can be used to move an indicator image file above the menu with main menu navigation? I already have javascript in hidden submenus that appear under the main menu. I’ve scoured the web for plugins and examples and the lavalamp script seems to be the closest - but not having much luck. Any thoughts would be appreciated. Cheers, Gillian

  • Jolyon
    November 27th, 2009 on 6:28 pm

    The LavaLamp plugin for jQuery has been updated several times before you wrote this article - it looks like you were using an older version when you made these patches to begin with.

    I have just updated the latest version to be more robust and better at automatically finding the proper link on page-refresh.

    You can check it out here: http://nixboxdesigns.com/demos/jquery-lavalamp.php

    If anyone finds any bugs, please let me know!

    Thanks, Jolyon

  • Richard
    December 4th, 2009 on 12:51 pm

    Hi Cory excellent post, enlightened me quite a bit, but I have a question about maintaining the active link.

    heres my menu:

    home

    this works well and the last item in the list or menu calls a page of posts entitled “Blog”. I am looking at “Blog” being the main category with recent work, tutorials etc being sub categories of this.

    Is there any way to maintain the active “current-cat” which would still be “blog” once you click on one of the posts as at the moment it defaults to home?

  • abhinav
    December 21st, 2009 on 8:43 am

    hi,
    cory..awsome article….thanks alot…
    i am trying to implement that menu into joomla template
    i have 90% done it.
    but their is a bug whenever i click the submenu(childlink) the menu image goes to the home page
    instead of selected parent menu plz help me.

  • Adam
    January 7th, 2010 on 9:55 pm

    Just wanted to say THANKS. You posted this almost a year ago but it is still helping people. I was trying to find a Wordpress solution for the past hour and came across your link. Thanks again!

  • sam adams
    January 13th, 2010 on 6:18 pm

    This is exactly what I was looking for!!! Thanks so much!

  • Daniel
    January 16th, 2010 on 5:30 pm

    Hi,

    Thanks very much for this article.

    I have 2 problems with my LavaLamp Menu.

    1. The person who helped me to install this effect couldn’t deal with the default highlight of WordPress pages in the menu bar. So i have the lavalamp effect, but still the page I’m on is highlighted all the time.

    2. You wrote how to deal with category menu with dropdown list. Could you write how to deal with page menu with dropdown list? When i enter the child page it slides back to the left.

    Any ideas how to fix that?
    Thanks in advance

  • Devin Walker
    February 22nd, 2010 on 6:12 pm

    EXTREMELY USEFUL POST! Exactly what I was looking for. I’ve been tinkering around with installing this lavalamp menu in wordpress for a bit this morning! Thanks

  • Albi
    February 23rd, 2010 on 11:02 am

    Holy Cannoli!

    This was giving me a headache for a long time. I have messed with my theme many sleepless nights only to realize it was within the lavalamp js.

    Thanks for the solution!

  • Khan @ Ecoverking
    March 23rd, 2010 on 6:55 pm

    Thanks You are a life saver :) God Bless!

  • skylos
    April 10th, 2010 on 3:41 am

    Thank you, your tips worked great and saved me many hours of debugging!

  • phil
    April 13th, 2010 on 4:05 pm

    hi i am having an annoying issue with my lavalamp. i actually did not build my own menu but downloaded a theme that came with it. however when i create a post the lava shifts to the left and kinda covers two and a half menu fields at once, kinda out of shape.
    http://metisstrategytest-com.si-sv2397.com/blog/?p=61
    any clue?
    thanks in advance

  • Morad Said
    April 14th, 2010 on 3:32 am

    really You’r great

  • webdhamaka
    April 17th, 2010 on 3:53 am

    Itz just fantastic You r great!

Newer Comments »

The following websites reference this page.

Leave a Reply

Links!