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

  • webdhamaka

    Itz great! Cheers!!

  • phil

    please anyone, i am stuck here. i used the step by step you provided at the beginning and the glide issue is fixed. the lava sticks at the category even if i select a submenu. however if i click on a link of a blogpost the menu becomes screwed. i am sure its a small and easy fix but i cant figure it out.
    http://metisstrategytest-com.si-sv2397.com/blog/
    the issue occurs when i select a link in a blog or if i select a category directly:
    http://metisstrategytest-com.si-sv2397.com/blog/?p=61
    thanks in advance

  • joel

    Thanks a lot. exactly what i was looking for. What a great help this was.

  • Jonathan Bell

    Hello, I just have one question… I have everything working fine… Except when the page is on the home page, or when you return to the home page, the “lava” disappears… Its fine on all the other pages… can someone tell me how i can fix this ?

    the site is here

    http://j1creative.com/sites/edco/

  • Guzmán

    Very usefull. Tahnks

  • Albert

    Thanks Cory! Just wondering if there’s a way for the menu to stay active on a category when viewing a single post? As is, when I view a single post the menu jumps to ‘home’. I see the same thing on your site. Any ideas of solving this?

  • Michael

    Just one question, is there a way to modify the jquery so that if a page has a parent, it will highlight the parent page in the navigation? Right now, the lavalamp works great, until you click on a ‘child’ page under a parent page.

  • Marvin Hasley

    29. Thank you for the info you have shared to us. One thing my sister fined this write-up extremely substantial and it truly helps her in so many ways especially dealing with her job.

  • Notebook Reviews

    Nice article :)
    Thanks fot this information.

  • Kalyn Streller

    Hello, sorry for being off but what theme do you use? did you design it by yourself? I love the theme here on this blog.

  • Cory Hekimian-Williams

    Kalyn there is a link at the bottom of this page that has a link to where I got the theme. I did make a few little modifications but not too many.

  • Jeremy

    Any way to get this working with WP3.0? namely the wp_nav_menu()?

    ‘header-menu’ )); ?>

    Thanks!
    j

  • Julee Mcirvin

    This is a fine website and I wished to post a tiny item to tell you, nice work!

  • Matt Rittman

    Thank you! Your fix solved all my problems I was having!

  • Matt Rittman

    Found a few more issues… When I use the search feature on my page or come to the 404 page, the lavalamp defaults to pointing to my blog page. Is there a fix for that by chance? I guess I’m not really sure where it should point at these occurrences… Is there a way to just maybe hide what it’s pointing to?

  • Vince

    Hi Cory,

    Great website!
    I have this menu working on a custom site I’ve build but I somehow can’t get it to work in Wordpress. I was wondering if you could help me out over email.
    Thanks,
    Vince

  • May

    Nice tutorial! I have a question: how did you expand your menu bar? I modify the CSS file, the menu didn’t expand to the length I want ,instead, it moved to the right on the website. I am not sure where I have to modify to fixed the problem.

  • Joey Snijders

    Thanks men, i was realy confusing at the current page part, but now i finally got it working. Thanks you very much! Greetz Joey Snijders, eXtentie.nl

  • Donte Radich

    Babaganoosh here and this was such a treat, boost out another one asap

  • Nico

    Hello !

    I got a problem with submenu in wordpress. When i’m hover my submenu the “li” class back doesn’t stay like on your website !

    I followed your advices but i have this problem i don’t manage to fix !

    Sorry for my english…

  • Jet

    Hi

    Great solution and I have it working well however when using Wordpress menus, when I click on the last link on the menu, on that page it jumps back to the first link on the menu list. All the other menu links retain their position, just the last link in the menu order doesn’t. Can you help?

  • Justin

    Thanks Cory, I was on the right track but just couldn’t get it working in Wordpress correctly. After finding your post I was able to get a little closer and then I found this Stack Overflow article, and realized I needed to change the click event to return true.
    Now everything is working awesome and I have lavalamp integrated with wp_nav_menu() in WP 3+

    Thanks for your help.

  • Navaki

    Hello,

    If I do as you say there is still a problem left. If I click on one submenue-item the marker doesn’t stay on the parentitem-element, it just vanished. The offsetWidth, which is important for the position turns to “0″. I don’t know why the last Element-offsetWidth ist null, it’s just don’t work properly for me.

    Doyou or does anybody else have an idea how to solve this?

    Thank you very much!

  • VicTheme

    Thanks for sharing…
    I’ve also created a lavalamp menu using Drupal module which can be view here http://www.victheme.com/demo_product/7
    if it’s Okay and welcome for any review or comments:)

  • Ebook Store

    Howdy just wanted to give you a quick heads up. The text in your post seem to be running off the screen in Safari. I’m not sure if this is a format issue or something to do with internet browser compatibility but I thought I’d post to let you know. The style and design look great though! Hope you get the issue solved soon. Kudos

  • 1onlinegamesguide

    Hi! I’m at work browsing your blog from my new iphone 4! Just wanted to say I love reading through your blog and look forward to all your posts! Carry on the superb work!

  • 765roulettesite

    Do you mind if I quote a couple of your articles as long as I provide credit and sources back to your site? My blog site is in the exact same niche as yours and my users would definitely benefit from a lot of the information you present here. Please let me know if this okay with you. Cheers!

  • Skitarg

    Perfect. thanks! works like a charm even 2 years later. ;)

  • Prady

    I am new to creting websites so i dont have much idea abt this,
    but i need help to introduce submenu in the lava lamp menu can some one please help

  • Prady

    It is not working with internet explorer, i will be using IE7+

  • Wordpress Web Designer

    Going to try this with wp_nav_menu. Have lava lamp working nice but now I need to add the suckerfish menus.

    Wish me luck:)

  • Abby

    Great! Been searching high and low for this solution. I’m thankful I found this. :)

  • Sanjay

    The mouseover doesn’t work with jQuery 1.7. Any suggestions on how to fix this?
    Thanks

  • Broy

    Hi! I would like to know how did you put the two drop-down sub-menu? I tried but no luck. BTW, I’m integrating it to WordPress.

    I wish you could help me solve this. I tried it once but the drop-down menu under the main menu was visible already.

    Thanks for your help!

  • TimdeBuurman

    Hi,

    The solution of changing .hover into .mouseover was not working for me.
    After some testing I found the problem.

    With a new jquery libtrary it did not work (jquery-1.7.2.min)
    After using an older version (jquery-1.2.3.min) it worked.

    Now, what shall I do if I need the newer version for some other effect in my website?

  • banesto

    i think this is better solutions:

    replace this line:

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

    with this line:

    $li = me.children(’li’), curr = $(”li.current”, this)[0] || $($li[0]).addClass(”current”)[0];

  • Karolyn

    Hi, yeah this article is really good and I have learned lot of things
    from it concerning blogging. thanks.

The following websites reference this page.

Leave a Reply

Links!