Howto: Lavalamp menu in Drupal 6

Today I got a tweet from @ChristianHudon who had seen our Lavalamp menu implementation on b4blinds.com:

@entendu I love this menu: http://www.b4blinds.com/ Care sharing howto?

So, Christian, here's how to:

First, javascript
Go snag the jQuery Lavalamp plugin and drop it in your /misc directory.

Next, decide where you're going to drop in the javascript. You can put it in a preprocess function or in your own module. Either way the code's the same. There are two things you need to include: the source file you downloaded above and the function to fire the Lavalamp off.

To include the js in a module or preprocess function, use drupal_add_js():

drupal_add_js("/misc/jquery.lavalamp.js");

Then, use Drupal behaviors to fire off the function that turns on the Lavalamp. I'm using Drupal's default primary links for the menu (luckily, Drupal outputs the menu HTML in the format we need by default!), which has the class primary-links. Put your function together and use drupal_add_js() again:

$js = "
Drupal.behaviors.lavalamp = function(context) {
$('ul.primary-links', context).lavaLamp();
}
";
drupal_add_js($js, "inline");

Refresh your page, and at this point the Lavalamp should be working, if not good-looking.

Next, css
This is going to be very dependent on how you want the site to look. I'll drop some examples to get you started here:

ul.primary-links {
background:url("b42/navigationbg.jpg") no-repeat scroll 0 0 transparent;
color:#000000;
float:right;
margin:24px 41px 5px 0;
padding:5px 19px 12px 23px;
position:relative;
z-index:4;
}

ul.primary-links li.backLava {
-moz-border-radius:5px 5px 5px 5px;
background-color:#ABA470;
}

You've probably noticed that I'm using border-radius... you'll have to figure it out on your own if you need curved corners in IE!

Thanks for reading, and I hope this gets you started. Remember you can always look at the source of b4blinds.com to help you if you get stuck!