Lava Lamp Menu Tutorial

JQuery LavaLamp menu for Drupal

This is going to be a quick tutorial on how to create a lavalamp menu using the jquery lavaLamp plugin. I figured it out mostly by trial and error using the abessive theme. Hopefully this will save someone time and also remind me how I did it. Thanks to the folks at Nixbox Designs and John Resig for giving us Jquery.
LavaLamp menu for Drupal 6.x steps

1. Download the plugin: LavaLamp plugin

2. Copy to text editor and save as .js file i.e. jquery.lavalamp.min.js

3. Download the easing plugin:Easing Plugin and do the same thing i.e. jquery.easing.min.js

4. Create lavalamp.css using this as an example.

5. Place stylesheet in themes folder (you'll need to make the call for the css)

6.Create "js" folder in themes directory. i.e. (sites/all/themes/abessive/js)

7.Go into template file (template.php) and put the following lines in<?php
// $Id: template.php,v 1.1.2.1.2.6 2009/03/18 17:15:14 njt1982 Exp $
drupal_add_js(drupal_get_path('theme', 'abessive') . '/js/jquery.lavalamp.min.js', 'theme');
drupal_add_js(drupal_get_path('theme', 'abessive') . '/js/jquery.easing.min.js', 'theme');
}
This goes at the top. Disregard the //$Id line (I just put that in to help you know where it goes)

8. Go into the page.tpl.php file and put in the following:

<?php // $Id: page.tpl.php,v 1.1.2.2.2.5 2009/03/18 17:12:06 njt1982 Exp $ ?>
language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">

<?php print $head_title ?>
<?php print $head ?>
<?php print $styles ?>
<?php print $scripts ?>

$(document).ready(function(){
$(document).pngFix();
});

$(document).ready(function() {

$(".lavaLampmenu").lavaLamp({ fx: "backout", speed: 1200 });

});

Again the only important thing is that the javascript tags and functions go before the

9. Also in the page.tpl.php is the following line:

<?php if (isset($primary_links)) : ?>
<?php print theme('links', $primary_links, array('class' => 'primary-links')) ?>
<?php endif; ?>
<?php if (isset($secondary_links)) : ?>
<?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
<?php endif; ?>

Change this to:<?php if (isset($primary_links)) : ?>
<?php print theme('links', $primary_links, array('class' => 'lavaLampmenu')) ?>
<?php endif; ?>
<?php if (isset($secondary_links)) : ?>
<?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
<?php endif; ?>

You should have a working lavalamp menu. You will certainly have to tweak the .css

Blessings,

Jon