Question

I have been looking for a way to make a navigation menu slide down from the top of the browser when the mouse enters the area near it and disappear when the mouse leaves the menu.

I am a lot closer thanks to this question.

The problem I am having is with the animation. It is behaving very strangely. I have emulated my code in JsFiddle to have a look at.

http://jsfiddle.net/tVreF/2/

Wait for a moment and move your mouse around the page, try resizing the window etc, and eventually it animates. Obviously this isn’t the way intended.

Any advice would be greatly appreciated, as im not sure if im going about this the right way!

EDIT: Just to clear up any confusion – I mean so that the navigation menu doesnt initially appear, then the entire menu itself slides down when the mouse goes near the top of the screen. Kind of like what happens when you set your windows taskbar to “Auto hide”.

Answer 1

What I have done is changed the approach.
I made a event catcher div in this fiddle:

http://jsfiddle.net/L2J5X/2/

and added event handlers when a mouse comes over that div the menu animates in, when the mouse moves out the div the menu animates out.

function dothething(amover)
    {
    if(amover) 
        {
            $(".nav").animate({top: '0px'}, 200, "linear");    
        } 
        else
        {
            window.setTimeout(function(){if(!$amthere){
            $(".nav").animate({top: '-40px'}, 200, "linear");        
            }},100);
        }
    }
        $("#detect").mouseover(function(){dothething(true);});
        $("#detect").mouseout(function(){dothething(false);});
$("#mainNav").mouseover(function(){$amthere=true;});
$("#mainNav").mouseout(function(){$amthere=false;});
$amthere = false;
​

The div is absolutely positioned with a top z-index so the event always gets caught. No matter what other divs do when they are placed randomly(see the great green block).

Hope this helps a bit.

* EDIT *

Added a brief delay to prevent hiding when going from catcher div to menu. That’s what the $amthere variable is for, to see if we are on the menu or not.
Then with a 100ms delay check if we are good to go for a real mouseout, if not do nothing, if so, hide hide menu.