CODEWITHSUNDEEP
jquerymenunavigationslideup
Darren Head
Darren Head

Reputation: 67

Sliding Nav menu off the top of the page - Jquery

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/

Upvotes: 4

Views: 882

Answers (2)

Pascal Boutin
Pascal Boutin

Reputation: 1264

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

Upvotes: 2

jdavis
jdavis

Reputation: 8655

Well first of all, in your jsfiddle link that you loaded, you weren't loading jquery you were loading Mootools. So it is jQuery that you are wanting to use, correct?

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

var timeout = null;

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

Upvotes: 0

Related Questions