Jquery: Make menu automatically slide out to the side after some seconds

Question

The code below does this: visitor clicks on the menu, it slides in horizontally, from the left side. Visitor clicks on menu again, it slides out (closes).

What I want is: the same behavior. But also: if menu is open and visitor does not click anywhere, menu slides out (closes) after 5 seconds.

Thank you for your help!

var clicked = 0;
function header() {
$('#header').click(
    function(){
            if(clicked === 0){
                $(this).stop().animate({ paddingLeft: '230px'}, {queue: false, duration: 400 });
                clicked = 1;
            } else if(clicked === 1){
                $(this).stop().animate({ paddingLeft: '0'});  
                clicked = 0;
            }
        }
);
}

possible duplicate of [Javascript: Call a function after specific time period](http://stackoverflow.com/questions/11901074/javascript-call-a-function-after-specific-time-period) — Praxis Ashelin, Mar 25 '15 at 10:27
Why the hell would you want to do that? If I (a user) want to read the items in the menu slowly, and 3 seconds wouldn't be enough, I don't want the menu closing on me! — Madara's Ghost, Mar 25 '15 at 12:18
@SecondRikudo The menu is not very long. Actually it's very short: 5 items (links) only. It's for the mobile version of the navigation of my website. I don't know how to make or implement a menu with swipe behavior. So I have only this one with click behavior. Some visitors may open the menu, but then decide to stay longer on the current page, but don't know they must click on the menu again, in order for it to slide out. The menu would then close automatically. — Bossa Nova, Mar 25 '15 at 12:26
@BossaNova You don't get to choose for me how long it takes me to read 5 links. What if I'm blind and the screen reader I use takes too long? Don't force bad UX because you don't know how to implement the better one. If you want to make it clear how to open and close the button, here's a nice example: https://jsfiddle.net/cLnn9ynf/5/ — Madara's Ghost, Mar 25 '15 at 12:28
@SecondRikudo I think you are right. I just hadn't thought about this possibility. I'll definitely try it. Nevertheless, I'm curious to know how to make the menu slide out automatically. — Bossa Nova, Mar 25 '15 at 12:35

Praxis Ashelin · Answer 1 · 2015-03-25T10:58:27.223

3

Use the .setTimeout() function:

setTimeout(function() {
    // your animation
}, 2000);

Your entire code should end up looking like this:

// You use the "clicked" variable to check if the menu is already active or not
var clicked = false;

// You can delete the "function header()" part because it's unnecessary

// Here we add "click" event when the visitor clicks the header
$('#header').click(function(){

    // Check if menu is already active
    if(clicked == false){
        // If not: animate menu and make active (*see below for more info)
        $(this).stop().animate({ paddingLeft: '230px'}, {queue: false, duration: 400 });
        clicked = true;

    } else {
        // If yes: animate menu back to normal and make inactive
        $(this).stop().animate({ paddingLeft: '0'});  
        clicked = false;
    }
});

// Set header to automatically animate to active after 2000 milliseconds
setTimeout(function() {
    $("#header").stop().animate({ paddingLeft: '230px'}, {queue: false, duration: 400 });
    clicked = true;
}, 2000);

I added explanation to your current code too. More info on the .animate() function here: http://api.jquery.com/animate/

edited Mar 25 '15 at 10:58

answered Mar 25 '15 at 10:21

Praxis Ashelin

5,137
2
20
46

Thanks, Dark, but where exactly should I place the setTimeout function in the above code, because I tried many ways, but they are not working. – Bossa Nova Mar 25 '15 at 10:31
Just add it before or after your current code. Not inside another function. – Praxis Ashelin Mar 25 '15 at 10:33
OK, I'm adding it after my current code, without changing anything. It's just not clear to me what exactly I should replace "your animation" with. – Bossa Nova Mar 25 '15 at 10:42
.... With your animation code – Praxis Ashelin Mar 25 '15 at 10:42
I'm doing this: setTimeout(function() { animate({ paddingLeft: '0'}) }, 2000); but it's not working. – Bossa Nova Mar 25 '15 at 10:51
2

Please see my updated answer. You should really try to understand the code you are using, and not just copy&paste it from somewhere without knowing what it does. – Praxis Ashelin Mar 25 '15 at 10:53
As much as I'm thankful for your help, I don't think it's fair for you to say I'm not trying to understand what I'm doing, since I tried many different things, even before posting the question. It's always easy for those who know more to say to them who know less that they are not trying. BTW: Your code doesn't work either: it reverts the menu to its original hover behavior (no more clicking) and now the menus stays just open. – Bossa Nova Mar 25 '15 at 11:03
@BossaNova To step in, there is zero mention that the menu should minimise after it has been expanded due to the delay. – mikedidthis Mar 25 '15 at 11:05
@mikedidthis I don't know what you mean. In the question: "I want the menu to slide out after some seconds, if visitor doesn't click anywhere." – Bossa Nova Mar 25 '15 at 11:08
@BossaNova Please let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/73750/discussion-between-dark-ashelin-and-bossa-nova). – Praxis Ashelin Mar 25 '15 at 11:12

Jquery: Make menu automatically slide out to the side after some seconds

1 Answers1