Delay for showing Drop Down Tabs

[dabri]

1) Script Title: Drop Down Tabs (5 styles)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...roptabmenu.htm

3) Describe problem:

I will use this excellent script for the navigation of my homepage.
I have modified the drop down menus, these menus will now appear in full width of the page (width: 970 px).

My problem is, if I move my cursor from the header over the horizontal CSS tabs menu to the body of the page, the second level drop down menu will appear immediately. If I want just watch the actual page, the drop down menu often cover the body of my page.

I´m looking for a way to delay the fade in the drop down menu.
The drop down menu only should display, if you stay e.g. 300 miliseconds over the according link in the horizontal CSS tabs menu.

Unfortunately my knowledge in JavaScript is very bad.

Thanks in advanced for your help!

Regards Daniel

[ddadmin]

Edit: See solution below instead

[dabri]

Thanks for your answer, but unfortunately it didn´t work.

I receive a message from the IE
"'menuitem' is undefined"

In trial-and-error method I´ve tried somethings with function "setTimeout", but I have no luck.

Hope you can give an other advice.

Thanks Daniel

[ddadmin]

Ah yes forgot to test this in IE, which has its quirks. Do this instead. Replace the below lines:

var event=typeof e!="undefined"? e : window.event
tabdropdown.dropit(this, event, this.getAttribute("rel"))

with:

var event=typeof e!="undefined"? e : {type: "mouseover"}
var menuitem=this
setTimeout(function(){tabdropdown.dropit(menuitem, event, menuitem.getAttribute("rel"))}, 500)

That should do it. And since you're already adding a delay to the mouseover, you might want to remove the default mouseout delay:

disappeardelay: 200, //set delay in miliseconds before menu disappears onmouseout

Change 200 to 0.

[dabri]

Thanks for your help, your Code works.

But not in the accurate way ;-)

I´ve uploaded my menu:
http://www.web-center.info/test/menu/

If I move the cursor quick from the header over the menu to the body, the drop down menu should not displayed.

But at the moment, the menu will displayed if I moved from header to the body (with the added delay).

I´m looking for a way, that the menu only will displayed if I stay e.g. 300 ms over the according link in the horizontal CSS tabs menu.

If I hover quick over the horizontal CSS tabs menu, the drop down menu should not be shown.

Hope the method is possible.

Thank you so far! Daniel

[ddadmin]

Sure. After implementing the above changes, edit the line:

setTimeout(function(){tabdropdown.dropit(menuitem, event, menuitem.getAttribute("rel"))}, 500)

to:

tabdropdown.delayshow=setTimeout(function(){tabdropdown.dropit(menuitem, event, menuitem.getAttribute("rel"))}, 500)

Then find the below new line inside the script, and add to it the line in red:

delayhidemenu:function(obj2){
 clearTimeout(this.delayshow)

This should do it, provided you've set the below line to 0:

disappeardelay: 0, //set delay in miliseconds before menu disappears onmouseout

[dabri]

Basically it looks good and thanks, thanks a lot,
but the display of the drop down menu is not stable.

1)
If I refresh the page and will move the cursor quickly from header to the body, the drop down menu will appear.

2)
If stay 500 ms over a link in the horizontal CSS tabs menu, then the drop down menu will appear. This is so correct.
But if I try to click on a link in the drop down menu, it isn´t possible, because very often the drop down menu collapsed immediately.

[ddadmin]

I'm not sure I understand 1). For 2) I see what you're saying. Try the attached .js file, which incorporates all of the above issues, hopefully.

[dabri]

Im sorry to say, but didn´t see a difference ;-)

http://www.web-center.info/test/menu/
(Set the setTimeout to 1500)

1)
If I refresh the page and will move the cursor quickly from header to the body, the drop down menu will appear.

I try to explane this in other words.
In my sample, after I enter the url and the page is loaded, my cursor is in the head section. Now I move the cursor quickly to the bottom of the page. In the way to the bottom, the cursor will move quickly over the menuline.

In this case, the dropdown menus shouldn´t displayed, but the dropdown menu will show in my sample.

2)
If stay 500 ms over a link in the horizontal CSS tabs menu, then the drop down menu will appear. This is so correct.
But if I try to click on a link in the drop down menu, it isn´t possible, because very often the drop down menu collapsed immediately.

The immediate collapse is still so.

[ddadmin]

For #2, you're right, after testing it some more, the problem is still there. The file I had attached was actually an incorrect version, but it doesn't matter, the correct version still has other quirks. Starring at this code is driving me absolutely crazy, so unfortunately I'm going to have to take a break from it.