Bar that pops up and down like kettlenyc.com and vevo.com

Question

Anyone know how to create a bar that pops up and down like kettlenyc.com and vevo.com?

I'm guessing some combination of css and javascript but I haven't been able to find a tutorial to help me out.

Thanks

Answer 1

I am pretty sure the examples you have linked to use something like JQuery or prototype/scriptaculous to achieve the effect. Have a look at this example, maybe that will help to get you started.

Cheers

Answer 2

To do this sort of animation without a javascript framework can be tricky, so you are definately going to want to use jQuery or something similar.

Here is an example using mootools: http://demos.mootools.net/Fx.Slide

Once you have the framework on you page it is simply a matter of setting up an event and calling the slide function:

myLink.addEvent('click', function() {
   var myfx = new Fx.Slide('myElement');
   myfx.toggle();
});