Cory’s Place

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.