Navigational aids in Websites

A short one today. I’ve made it a personal mission in the past couple of days to recreate a cool CSS navigation effect I found recently. There are 2 case scenarios I’ve been thinking about to do this

1) http://icofx.ro/  Check out the hover effect in the website navigation

It’s called llavalamp effect which is an appropriate name for the visual effect it seems to make. It hovers to the link/text that the cursor goes to and automatically changes width to match the size of the word it surrounds.  It seems to do it using a background image on the website. This background image repeats on X axis but goes across so doesn’t scale but just blends into an otherwise clear white default background. I thought.

To find out, I opted for a reverse engineering technique to inspect the site, piece by piece in an attempt to find out what makes the effect tick.  It’s worked for me in the past I just couldn’t get to the images that would make it possible so I couldn’t recreate the precise effect.

I could quite figure out… 
How does it work that a it scales but does not repeat?
How was the background image generated?
What drives the hover effect?
And why on earth will the effect not work even in a modern browser like FireFox 25?

Then, by chance I found the Holy Grail.

http://blog.insicdesigns.com/2010/02/creating-a-fancy-menu-using-css3-and-jquery/

This is the work that the original script was based on. It’s open source if you want to use it but you’ll need to download the javascript yourself rather than using the presented code as I spent more time than I care to admit looking through the code and wondering why the hover effect would not take more effect than just the margins and padding. Download the package and search for the javascript file and the effect should work.

Check out the demo and the downloads.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s