jQuery LavaLamp Menu

jQuery, being one of the most popular JavaScript frameworks on the planet, gets a lot of cool scripts developed for it. LavaLamp is one of those jQuery-dependent scripts that’s useful, and really cool at the same time.

LavaLamp, adding only 700 bytes to your page’s size, adds a little bit of visual flair to your CSS menu without inhibiting usability.

Let me attempt to describe how it looks… The selected link in the navigation (class="selected") is highlighted with your custom CSS styling (it looks best with either a background color, or a rounded-cornered background image), like you’d expect from a menu. When you point at one of the other links in the menu, the background speeds over to the link your pointing at. You really have to see it in action for yourself.

I found the script by chance about a year ago, and am planning to use it in a project I’m working on. It makes for a more interesting menu, without detracting from usability, and it gets rid of that annoying side effect of having a CSS highlight menu where your selected list item keeps it’s styling when you hover over another link.