Revising the jQuery Drop Down
May
03
This post is in reference to the jquery drop down menu tutorial .
Someone emailed me asking if the menu could truely slide in , vertically, not how it is now with the slide on a slight angle ( using jquery’s show / hide ). Its very easy to alter the existing code to make it truely slide.
Instead of using jQuery’s show and hide functions, we just use slideDown and slideUp in replace of them. So the jQuery looks like this..
-
$(document).ready(function(){
-
-
$("#drop_down").hide();
-
$("#drop_down").animate({
-
-
opacity:0.5
-
-
});
-
-
-
$("a:contains(’Google’)").click(function() {
-
$("#drop_down").slideDown("slow");
-
-
});
-
-
$("#drop_down").mouseout(function(){
-
$(this).slideUp("slow");
-
-
});
-
});
Mitch Says:
Thats cool. but how would you change the easing and the type of animation such as back, or elastic?
Posted on May 15th, 2008 at 10:13 am
Panzer Says:
I haven’t used the easing plugin a whole lot so i can’t provide a definitive answer.
From the looks of things on their website, http://gsgd.co.uk/sandbox/jquery/easing/ , you would just make a function that does the animations you want. It seems they have a large library of functions already.
You would replace slideDown and slideUp with your functions.
Posted on May 16th, 2008 at 12:37 am