Grow your CSS skills. Land your dream job.

Scriptaculous vs Jquery slideDown();

  • # July 21, 2010 at 2:32 am

    How can I create a navigation menu similar to the one found on NFL.com using jquery? It as a drawer like drop down when you hover over a link.

    the scriptaculous slideDown functionality is exactly what I want but Is there something similar in jquery because i dont have to include two js libraries?

    Thanks.

    Rob
    # July 22, 2010 at 2:53 pm

    yea – it’s called .slideDown() :D

    http://api.jquery.com/slideDown/

    # July 22, 2010 at 6:42 pm

    Im sorry, I was a little unclear. slideDown() only reveals the Div from the top. this other way ‘pulls’ the bottom down, appearing like a garage door.

    Rob
    # July 22, 2010 at 7:28 pm

    ahh yes – I see what you mean, just checked the NFL :)

    what I would do is use animate – so kinda like…

    Code:
    var height = *calculate the height of the menu slide down box and store it in this var*

    $("itemSelector").hover(function() {

    $(‘boxSelector’).animate({top: height}, 500);

    }, function() {

    $(‘boxSelector’).animate({top: -height}, 500);

    });

    the hover function there will when you hover on, open the box, and then close it when you hover off… that is very rough to give you the idea. :)

    Animate is actually the way I do pretty much all of my movement style jQuery effects as the slideDown/slideUp or whatever never work exactly as I want them to…

    Here is some more for you to look at and see if it is right for you…

    http://api.jquery.com/animate/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".