Check out the rest. Come back for the BEST

Recent Blog Posts

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

A Message from RAWDesigners

Search

affilliate image button
Web sites under 200 dollars

Poll

I am happy with my website.:

Shopping cart

View your shopping cart.

Use RAWDesigners affiliate link to create a Paypal Account and get a free eSTORE!

Sign up for PayPal and start accepting credit card payments instantly.