Sliding Nav menu off the top of the page - Jquery

Question

Hi I am new to jQuery and I'm looking to slide my navigation menu off the top of the page after a certain time. Probably around 3/4 seconds of a user being on a page. I will probably add an arrow button to bring down the menu after it has slid off the page but for the time being I just need to know how to slide it up and down. I think I may need to amend my CSS to make this work too.

Any help of tips handed on will be much appreciated.

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

Answer 1

I would do this that way :

First, I use here the $(nav) selector but you may adapt it to your code first. Also, you will need to put your menu : position: relative; OR position: absolute;

To make it slide out :

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

To make it slide in :

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

If you want to make is popout 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 like so :

$('#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();
        });
    }
});