Slide the Nav menu at the top of the page - jQuery

Question

Hi, I am new to jQuery and I want to move my navigation menu at the top of the page after a while. Probably about 3/4 of a second the user is on the page. I will probably add an arrow button to display the menu after it slid from the page, but for now I just need to know how to move it up and down. I think I may have to change my CSS to make this work too.

Any help advice that will be handed out will be greatly appreciated.

See jsFiddle for more details: http://jsfiddle.net/headex/tJNXD/

Answer 1

I would do this:

At first I use the $(nav) selector, but you can wrap it in your code first. In addition, you will need to place your menu: position: relative; OR position: absolute;

To make this a slide:

 $(nav).animate({"top":$(nav).height() * -1},"slow"); 

To make it available:

 $(nav).animate({"top":0},"slow"); 

If you want to do this popup after 3 seconds, here we go:

 function MenuOut() { /* The sample code I put on top */ $(nav).animate({"top":$(nav).height() * -1},"slow"); } 

and you put this on your Js page:

 /* This will run once the document is ready */ $(function() { setTimeout("MenuOut",3000); /* 3000 represent 3000 milliseconds, so 3 seconds */ }); 

Now the button:

 function MenuIn() { $(nav).animate({"top":0},"slow"); } 

and you bind it to your button as follows:

 $('#theButton').on( { click: function() { /* Hide the button, and then show up the menu */ $(this).animate({"top":$(this).height() * -1},"slow",function() { /* I putted this in a callback function, so the 2 animations will be one after the other, not at the same time ! */ MenuIn(); }); } }); 

Answer 2

Well, first of all, in your jsfiddle loaded link, you did not load the jquery that you downloaded Mootools. So what jQuery you want to use fix?

If so, you can use something like this ...

 var timeout = null; $('#masterNav').hover(function() { clearTimeout(timeout); }, function() { timeout = setTimeout('$("#nav").slideUp(500)', 750); });