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

    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

    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

    You rock. World needs more souls like you.

  • Play Download Games

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

  • Johan

    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

    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

    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

    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

    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

    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

    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

    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

    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

    You rock! Thanks for this tip!

  • Joey

    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

    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

    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

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

  • Raymond Karlsen

    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

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

  • Ariyo

    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

    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

    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

    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

    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

    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

    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

    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

    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

    Thank You !!

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

    Appreciate it.

    Cheers,
    A.

  • ryan

    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

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

  • moabi

    great article, thx so much for the help

  • Joe

    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

    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

    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

    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

    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

    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

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

  • Daniel

    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

    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

    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

    Thanks You are a life saver :) God Bless!

  • skylos

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

  • phil

    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

    really You’r great

  • webdhamaka

    Itz just fantastic You r great!

The following websites reference this page.

Leave a Reply

Links!