CODEWITHSUNDEEP
javascriptcssdrop-down-menumenu
Alex
Alex

Reputation: 68044

Delayed drop down menus without jQuery

Do you know any dropdown menu scripts out there written in plain javascript, but not relying on jQuery?

I know how to achieve this with CSS, but I'd also like to add a nice fade effect and make it wait 1 second after the mouse is outside the menu, then close it if the mouse doesn't come back within the menu area.

I think I could implement the fade effect using the CSS "transition" property, but I have no clue on how to add the delay on mouseOut

Upvotes: 1

Views: 1476

Answers (2)

insertusernamehere
insertusernamehere

Reputation: 23580

You could use the transition-delay-property and do the following:

  • remove the "delay-class", when the user enters the menu
  • add the "delay-class" when the user leaves the menu

See: https://developer.mozilla.org/en/CSS/transition-delay

Or you could do it like this (note: just pseudo code):

var timer       = null;

function onenter() {
    showSubMenu();
    clearTimeout(timer);
    timer = null;
}

function onleave() {
    overMenu = false;
    timer    = setTimeout( function () { hideSubMenu(); } , 1000 );
}

Upvotes: 1

Antimatter
Antimatter

Reputation: 157

I like this one, it's only 1.2 KB, the code is simple to modify:

http://www.scriptiny.com/2008/11/drop-down-menu/

You can change the time by modifying the "t" variable.

Upvotes: 1

Related Questions