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

jQuery Sliding Menu (AKA Lavalamp Menu

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

63 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);
}
});

Преимущества:

Вы можете купить товары категории «Промышленные подшипники» гипермаркетах нашей сети или оформить заказ на официальном сайте Лемана ПРО:

Упорные: для восприятия осевых нагрузок (шариковые упорные, роликовые упорные).

– уплотнения, сальники, армированные манжеты SKF, Dichtomatik, NQK;

Грузоподъемность:
Материалы:

With havin so much content and articles do you ever run into any
problems of plagorism or copyright violation? My website
has a lot of completely unique content I’ve either written myself or
outsourced but it looks like a lot of it is popping
it up all over the web without my agreement. Do you know any ways to help protect against content from being ripped off?
I’d definitely appreciate it.

My partner and I stumbled over here by a different web address and thought I
might as well check things out. I like what I see so now i
am following you. Look forward to looking into your web page
yet again.

газовое оборудование;
Гарантия и сервисная поддержка
Проверьте наличие сертификатов, маркировки и гарантий https://zapchastikam.ru/zapchasti-kamaz/ehlektrooborudovanie/fara-protivotumannaya-zheltaya-fg152-analog-5320-3743010

кабины и подвески;

двигатели в сборе;
если сроки ремонта ограничены, можно выделить те компоненты, которые есть в наличии;

Lavalamp Menuの動きが、jQueryでナビゲーションに視覚的なフィードバックを加える例として分かりやすいですね。記事内のコードは少し圧縮されているので、動作を確認しながらブラウザ上で画像編集も試せる画像編集を、 ブラウザだけ でと組み合わせて、操作感の参考にしてみたいです。

The Lavalamp-style sliding effect is a neat way to make a navigation menu feel more responsive, though I’d be curious how well this jQuery approach holds up on touch devices and with current browser standards. For anyone pairing interactive menus with visual projects, ChatGPT Image Prompts could be a useful resource for generating complementary image ideas.

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.