jQuery Sliding Menu (AKA Lavalamp Menu)

Home / Featured
jQuery Sliding Menu (AKA Lavalamp Menu)
28February

jQuery Sliding Menu (AKA Lavalamp Menu)

About the Author

Comments

    Adeptus - February 28, 2010

    Great work! Tnx Master!

    Reply
    Margaret - March 2, 2010

    The Demo http://www.geektantra.com/projects/jquery-sliding-menu/# doesn't seem to be working.

    Reply
    Elena - March 3, 2010

    Thanks. It was easy to understand this material. I am waiting for new information about this theme.

    Reply
    Adsense helpers - March 4, 2010

    Any kind of help regarding google adsense contact anytime - adsensehelpers@yahoo.com

    Thanks

    Reply
    Greg - April 5, 2010

    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?

    Reply
    Tech stuff - April 9, 2010

    Thanks this is an awsome menu , i use it on so many of my clients websites now , i cant get enough !

    Reply
    Thomas - May 3, 2010

    class="ActiveLink" doesn't work

    Reply
    Andrew - May 31, 2010

    the initialOpacity doesnt work on IE7, Javascript error
    the demo breaks too.

    Reply
    Peter - September 4, 2010

    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!!!

    Reply
    diesel - October 10, 2010

    Thanks for this solution.

    Reply
    Art Gola - October 17, 2010

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

    Reply
      GeekTantra - October 17, 2010

      Hi Art Gola,

      Thanks a lot for the valuable feedback. Will certainly make the changes and commit.

      Regards,
      GeekTantra

      Reply
    Ricardo - December 6, 2010

    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!

    Reply
    Matt - December 22, 2010

    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

    Reply
    Michael - May 21, 2011

    I have used this menu on one of my websites..thanks!

    Michael

    Reply
    VicTheme - July 13, 2011

    Thanks for sharing…
    I’ve also created a lavalamp menu using Drupal module which can be view here http://www.victheme.com/demo_product/7
    if it’s Okay and welcome for any review or comments:)

    Reply
    Stefan - February 24, 2012

    Hi there,

    this plugin doesn't seem to work with jQuery 1.7.1

    Any chance to get it to work again?

    Thanks!

    Reply
    underx - April 11, 2012

    it doesn't work with jquery-1.7.1.min.js.
    But thanx for sharing.

    Reply
      Harshil Safi - July 24, 2012

      It works with 1.7.2
      Few bugs regarding highlightonClick
      but are easily fixable

      Reply
        Art Gola - August 13, 2012

        Care to share these issues, or perhaps add them to the Issue Tracker at http://code.google.com/p/jquery-sliding-menu/issues/list so that others can benefit?

        Reply
    Art Gola - August 13, 2012

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

    Reply

Leave a Comment

Notify me of followup comments via e-mail

Get Adobe Flash player