Categories
Featured Javascript Programming

jQuery Sliding Menu (AKA Lavalamp Menu)

jquery-sliding-menuFinally, I am back after a long time with a refreshing new jQuery plugin to make your Web Page menus look better. Its the jQuery Sliding Menu.
Demo: Click Here
Download: Click Here
Project Repository: Click Here

Finally, I am back after a long time with a refreshing new jQuery plugin to make your Web Page menus look better. Its the jQuery Sliding Menu also known as the Lavalamp Menu or Fancy menu by some.

Demo: Click Here
Download: Click Here
Project Repository: Click Here

Usage:

That’s it you are done!

For advanced users:

List of options available:
backgroundClass Class of the moving background (Default: “Background”)
initialOpacity Opacity of the moving background (Default: 1)
slideSpeed Speed at which the background should slide (Default: 1, should be a fraction less than 1 which is max speed)
easing Type of easying with which the background should slide (Default: “linear”, must include jQuery UI core for this to work)
callback Callback of the sliding menu event (Default: “”)
backgroundContent HTML for moving background (Default: ”

“)

activeClass Class for the clicked link (Default: “ActiveLink”)
highlightOnClick Tells whether the menu item should get highlighted on clicking it (Default: false)

Hope you liked the plugin. Awaiting your comments

If you liked the plugin please spread it for your friends to use and please rate it at http://plugins.jquery.com/project/jquery-sliding-menu

26 replies on “jQuery Sliding Menu (AKA Lavalamp Menu)”

Awesome menus. They look great in Firefox. But in Internet Explorer 8 the menus don’t look nearly as good. How can I fix this problem for IE?

Hi,

I’m having troubles with IE 6&7 as everyone else getting message error “object doesn’t support this property or method”

Can you help us out?

BTW, great menu plugin!

Thanks in advance!!!

For those of you having a problem with this script in IE7; the root cause appears to be a bug in the following line:

jQuery(this).css({
‘position’: ‘relative’,
});

There is an extra comma after ‘relative’; change the line to read as follows by removing the comma and the script should now work in IE7.

jQuery(this).css({
‘position’: ‘relative’
});

hi, I’m unable to use the script in jquery 1.4.3 as the rest of our site, I’ve tried previous versions and it does work. 🙁

what’s changed, how can I make this compatible.
Thanks in advance!

Wasn’t working for me either – was staying hidden. Fixed by going to line 20:
change “display:none;” to “display: block; opacity: 0;”

Dunno if that was just my implementation or the latest jquery changing things

For those of you struggling with making this work with later versions of jQuery (beyond 1.4.2) add this line AFTER:

var h = jQuery(this).outerHeight();

/** new line **/
jQuery(this).parents(“ul:first”).find(“.” + options.backgroundClass).css({‘display’: ‘block’});

your hover function should look like this:

jQuery(this).find(“li a”).hover(function () {
var t = jQuery(this).position().top;
var l = jQuery(this).position().left;
var w = jQuery(this).outerWidth();
var h = jQuery(this).outerHeight();

/** make sure that the item is visible **/
jQuery(this).parents(“ul:first”).find(“.” + options.backgroundClass).css({‘display’: ‘block’});

jQuery(this).parents(“ul:first”).find(“.”+options.backgroundClass).stop().animate({
opacity: options.initialOpacity, top: t, left: l, width: w, height: h
}, options.slideTime, options.easing, options.callback );

}, function(){
if(options.highlightOnClick){
jQuery(this).parents(“ul:first”).find(“.”+options.backgroundClass).stop().animate({
opacity: “1”,
top: options.initial_top,
left: options.initial_left
}, 500);
}else {
jQuery(this).parents(“ul:first”).find(“.”+options.backgroundClass).stop().animate({
opacity: “0”
}, 500);
}
});

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.