Freebie: jQuery DropDown LavaLamp menu
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.
jQuery LavaLamp Menu Live preview!
Download Freebie: jQuery LavaLamp menu (2485)
SCREENSHOTS
1. Two line lava lamp menu with glowing triangles on hover:
2. Horizontal menu with smooth animated color as curtain roll over:
3. Horizontal menu with smooth animated gradient as roll over:
4. Horizontal menu with smooth animated gradient as a curtain roll over:
5. Horizontal menu with a triangle lava lamp hover effect:
6. Horizontal menu with smooth and simple classic lava lamp hover effect:
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.
Tags: jquery dropdown menu, jquery lava lamp menu, jquery menu, lava lamp menu
9 Comments for Freebie: jQuery DropDown LavaLamp menu
November 26, 2011 at 8:28 pm
Really like this lavalamp plugin
January 12, 2012 at 4:03 pm
Thank you !! This is a really nice Lava-Lamp Menu
BUT …
FIRST:
) is fuckin up the whole nice menu, expanding the hover box 600px to the right.
when i put a Lightbox script in for some pics in the content area, all Internet Explore (who else !?
Actual Firefox/Chrome/Safari/Opera is displaying all right.
And SECOND: (But i could live with that) … thus to in the menu code the whole site isn’t Html Validating … giving 7 Errors
I know it’s a Freebie but wouldn’t it be nice that people can use it properly !?
Just some thoughts
A Webdeveloper
January 24, 2012 at 8:09 pm
PLEASE HELP!! I have implemented your code (which works perfectly for my application). The only issue is that the last menu item is being bumped down on to the next line in all browsers ( Internet Explorer 9, Safari, Chrome). I have done some testing and think its related to the total width in the menu.js file, but am not sure. Here is the page: http://ahid.saracreative.com/
Please help
)
February 8, 2012 at 1:07 am
hey everyone, grats on the code, looks nice, though i had some issues, first, de dropdown menus go down with the screen if you scroll the window down, fixed it!
also fixed display of menus on hover when javascript turned off
and added a animated color change on link hover text.
and added a second lava “light”,a non streching png on top of menu, that centers on link hovered
(unlike the one coded that goes to left of link and ads a end image.
if anyone is interested let me know
February 8, 2012 at 9:29 am
Hi,
Glad to see you fixed some of the issues and added some new features. Always a pleasure to see when someone makes something useful out of our code:). I can put your version on our site also with your credentials and a link to your website if you wish.
best regards,
Team PremiumCoding
February 26, 2013 at 9:49 am
I’m trying to update the site, and I like very much the meniu from http://premiumcoding.com/lavaMenu/2.html
As I understand there are some bugs mostly in IE.
I’m not a real programmer so, if somebody can help me for implementing the code in the new site and providing the IE hacks, I’ll be glad to pay for.
Thanks in advance
February 21, 2012 at 6:55 am
Is there a way to get the slider to return to the current page?
September 20, 2012 at 1:59 pm
What can I tell except THANKS A LOT!
Thank you for this beautiful menu and very nice examples. 
January 17, 2013 at 6:30 pm
Hi!
Amazing lavalamp! Thanks for sharing.
I only have one problem.
Like Mike has mentioned, i would like to know how to make the hover effect return to the current page instead of stopping on the last hovered page. I don’t know if this makes sense, but is there a way to set current page?