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():
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();
- }
- ";
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!
Comments Join the discussion...
Nice implementation :) I
Nice implementation :) I thought I'd try it out on a Drupal site - seemed to work well at first, but I notice that if you are using primary menus + secondary menus (with source of secondary menu set to primary), then the lavalamp resets to the first link in the menu when you are viewing an item in a secondary menu, regardless of the active menu trail
Just to follow up on my
Just to follow up on my comment, I worked around that issue by changing "selectedLava" in the lavalamp js file to "active-trail" and that solved it completely with secondary menus.
Post new comment