Lavalamp jquery menu

Freebie: jQuery DropDown LavaLamp menu

September 23, 2011 by PremiumCoding - 9 Comments

Today’s freebie is a fully functional jQuery DropDown Lava Lamp menu in six different variations. It is meant to be used as a header menu but with some small changes it can be adjusted to fit any screen. Changing to vertical position is possible but it requires some more modifications. Three levels of submenus are implemented which should cover most of your needs. Menu comes in six different variations from a lava lamp menu to roll over curtain effect.

All resources are created by PremiumCoding and are free of charge with little restriction. If you would like to show support please take a look at some of our WP plugins and Flash files.

      
 

Download Freebie: jQuery LavaLamp menu (3683)

SCREENSHOTS

1. Two line lava lamp menu with glowing triangles on hover:

Lavalamp jquery menu

2. Horizontal menu with smooth animated color as curtain roll over:

Jquery menu animated hover

3. Horizontal menu with smooth animated gradient as roll over:

Jquery Menu Animated Gradient Hover

4. Horizontal menu with smooth animated gradient as a curtain roll over:

Jquery Menu Animated Gradient Hover

5. Horizontal menu with a triangle lava lamp hover effect:

Jquery menu animated gradient triangle

6. Horizontal menu with smooth and simple classic lava lamp hover effect:

jQuery Lava Lamp Menu

INCLUDED FILES

  • jQuery files
  • HTML files
  • CSS file
  • PSD files
  • jpg and png images

QUICK GUIDE

Modifying JS (menu.js) file:

  • change speed of background hover (variable speed. Current speed is 275 miliseconds.
  • change time of fade in effect of submenus (variable menuFadeIn). Time of fade in effect, current value is 300 miliseconds.
  • change time of fade out effect of submenus (variable menuFadeOut). Time of fade in effect, current value is 200 miliseconds.
  • when setting submenus be sure to always set “li” tag of menu to li class = “submenu” like in example. This is how you tell javascript that submenus will be used.
  • both js and css files are commented
  • font, lava lamp color and all other menu related settings are set via CSS file

All resources made available under category Freebies on PremiumCoding are free for use in both personal and commercial projects.

You may freely use resources, without restriction, in software programs, web templates and other materials intended for sale or distribution. No attribution or backlinks are required, but it’s always nice to be credited. Any links or nice words are always appreciated.

Download Freebie: jQuery LavaLamp menu (3683)