treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

Scriptaculous vs Jquery slideDown();

  • acondiff
    Permalink to comment #
    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.
  • Robskiwarrior
    Permalink to comment #
    yea - it's called .slideDown() :D

    http://api.jquery.com/slideDown/
  • acondiff
    Permalink to comment #
    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.
  • Robskiwarrior
    Permalink to comment #
    ahh yes - I see what you mean, just checked the NFL :)

    what I would do is use animate - so kinda like...


    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/
Add a Comment