Subscribe
TwitterLavalamp examples
Recently I have had lots of compliments and questions about the navigation used on this site so I thought I would write a bit of a tutorial about how it was done and also show some further examples of what is possible using similar techniques.
Firstly I have to say that I didn’t write the magic behind it, I’m not that clever! It is powered by jQuery and most importantly the fantastic lavalamp plugin. In these examples I have kept everything as close as possible to the original to make it easy to understand. The only things I have altered are the CSS. To get the most out of these examples you should familiarise yourself with lavalamp first.
The examples are using transparent pngs so will look funny in ie6 so if you are using the ideas on a final product you should switch them for gifs in ie6 or use a png fix such as this jQuery plugin.
I’ll skip to the important bit, here are the examples. The first one is a basic version of the styles used on this site and the other 2 are some further examples I came up with to show how cool the lavalamp plugin is! Check out the stylesheet to see what is happening
Example 1: Centre image pointer.
To do this I used one image set centralised to the bottom of li.back. Then I added some height so that the pointer appeared below the text. The line below is a graphic applied as a background to the ul. For a more advanced technique you could use absolute positioning and z-index to put the navigation over the top of something like I have done on the site.
Example 2: Transparent words
For this example I kept the same basic example used in the plugin’s official examples with the moving solid background. To make it more fancy I added an image background to the anchors that was a white (or whatever colour you page background is) block with the words transparent in it.
Example 3: Spotlight effect
This is more or less the same as the transparent words one but uses an image on the background to produce something that looks a bit like a spotlight shining behind it (if you use your imagination!).
So there it is. I haven’t done anything special, just applied some styles to the lavalamp plugin to try and make some interesting effects. All credit for the javascript goes to Ganeshji Marwaha the creator of the plugin and to Devthought for the original idea. I think there is huge potential for experimentation with the plugin, what else can you come up with?
Edit: I tried to let Ganeshji know that I had written this, to check he didn’t mind and so he could use the examples in his demo if he wanted to, if anyone has any info please let me know so I can give credit where it is due.
Very nice website! Thanks for the credit.
Hi Guillermo, Thanks! You’re more than welcome, thanks for the great work you put into the original of the plugin.
Great tutorial. i’m trying to get it to work using example 1, but somehow.. something is going wrong… Will have to figure out what that is.
Nice.. it works.. finally.. stupid enough it was the link to the java script! Thanks for sharing!!
what’s the catch which says – do not display original image? – because i see 2 images – one which is static, and one which is moving.
Very Nice Information. One issue I am having that I would like to get some advice on is how to ensure when the page changes that lavalamp knows which page its on and sets the current list item correctly. It’s loosing state on the page changes.
Hi T.McKinney,
To get the indicator to the current one you need to give the current li a class of current. If you are using static html just add it into you html, if you are using a CMS or something similar you will need to add it into your template. For example this site runs on Wordpress and sets the current page using a series of if statements.
Hope that this helps.
James
Any thought on how to use multiple images? I’d like to have the same effect you use on this site, the centered image. But also an image on either sides of the centered one. In other words, I’d like the menu to look like a square block with a pointer at the bottom center of that square. Any ideas?
Thanks for the answer, I had the same problem! Solved