How to Build a jQuery Lava Lamp Menu

Example:

How to Build jQuery Lava Lamp Menu Tabs from Devin R. Olsen on Vimeo.

This effect is called “animated rounded menu tabs”. It’s a neat little effect that will work in all browsers including IE6+. somethings to note is that this technique uses a single image for its four corners and is stretchy in both width and height!

We are also using the jQuery JS lib to ensure our JS works across all browsers but also to cut down on the amount of JS we uses to make this great effect. Here is the link I use in the video tutorial to use the jQuery lib from Google’s online repository.

http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js


The Video Tutorial:

Here is the full source if you want to just get down to studying the code.





Devin R. Olsen - Lava Lamp Menu Tabs%MINIFYHTML416566eeb022df579785d823fe59fcd218%%MINIFYHTML416566eeb022df579785d823fe59fcd24%%MINIFYHTML416566eeb022df579785d823fe59fcd25%


	%MINIFYHTML416566eeb022df579785d823fe59fcd26%%MINIFYHTML416566eeb022df579785d823fe59fcd27%%MINIFYHTML416566eeb022df579785d823fe59fcd28%

Devin R. Olsen

Located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

More Posts

Follow Me:
TwitterFacebookGoogle Plus