Search jQuery

jQuery Forum

Getting Started

andres.le..

Adding a delay to a cascading menu mouseout

in Getting Started • 9 years ago

Hello Forum,

Thanks in advanced for your help!

I am working on a website that requires a cascading navigation system. I got the following code from www.dynamicdrive.com and have tweaked a few things to work for my needs

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids = ["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
function initsidebarmenu() {
for (var i = 0; i < menuids.length; i++) {
var ultags = document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t = 0; t < ultags.length; t++) {
ultags[t].parentNode.getElementsByTagName("a")[0].className += " subfolderstyle"
if (ultags[t].parentNode.parentNode.id == menuids[i]) //if this is a first level submenu
ultags[t].style.left = ultags[t].parentNode.offsetWidth + "px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left = ultags[t - 1].getElementsByTagName("a")[0].offsetWidth + "px"; //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover = function()
{
this.getElementsByTagName("ul")[0].style.display = "block";
}
ultags[t].parentNode.onmouseout = function()
{
this.getElementsByTagName("ul")[0].style.display = "none";
}
}
for (var t = ultags.length - 1; t > -1; t--) { //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility = "visible";
ultags[t].style.display = "none";
}
}
}
if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

The problem i am facing is that the onmouseout action is happening too fast. When the user moves the mouse out of the list item element, the navigation sub-items disappear too quickly. I need to find a way to slow their disappearance. I have tried adding setTimeout as well as setInterval where i se the the style display to none. However this is not working.

I would appreciate any assitance you may give in letting me know how i can set a specific delay for the item to disappear after the user has moved the mouse out of the element.

Thank you.

Replies(1)

andres.le..

Re: Adding a delay to a cascading menu mouseout

9 years ago

After a bit of further research i found a forum entry talking about this same issue. However the code they were using was not the same one i had. But it gave me sufficient info to tweak the original code to make it work.

Hope this helps other out there!

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
//includes delay of li disappearance on onmouseout event from info posted on http://www.webdeveloper.com/forum/showthread.php?t=124275&page=2
var menuids = ["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
var onMouseOutDelay = 700; //Delay that will apply to mouseout event
function initsidebarmenu() {
for (var i = 0; i < menuids.length; i++) {
var ultags = document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t = 0; t < ultags.length; t++) {
ultags[t].parentNode.getElementsByTagName("a")[0].className += " subfolderstyle"
if (ultags[t].parentNode.parentNode.id == menuids[i]) //if this is a first level submenu
ultags[t].style.left = ultags[t].parentNode.offsetWidth + "px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left = ultags[t - 1].getElementsByTagName("a")[0].offsetWidth + "px"; //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover = function()
{
this.getElementsByTagName("ul")[0].isMouseOver = true;
this.getElementsByTagName("ul")[0].style.display = "block";
hideAllOther(this);
if (this.toref)
window.clearTimeout(this.toref);
}
ultags[t].parentNode.onmouseout = function()
{
var saveref = this.getElementsByTagName("ul")[0];
saveref.isMouseOver = false;
if (this.toref)
window.clearTimeout(this.toref);
//this.getElementsByTagName("ul")[0].style.display = "none";
this.toref = window.setTimeout(function(e) {
if (!saveref.isMouseOver)
saveref.style.display = "none"
}, onMouseOutDelay);
}
}
for (var t = ultags.length - 1; t > -1; t--) { //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility = "visible";
ultags[t].style.display = "none";
}
}
}
function hideAllOther(liobj) {
var p = liobj.parentNode.childNodes;
//alert(liobj.parentNode.childNodes[3]);
//alert(p);
var i;
try {
for (i = 0; i < p.length; i++) {
if (liobj != p[i] && "LI" == p[i].tagName && p[i].getElementsByTagName("ul").length)
p[i].getElementsByTagName("ul")[0].style.display = "none";
}
} catch (e) {
alert(p[i].innerHTML)
}
}
if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

Top Reply

Response title

Attachments

jQuery Forum

Adding a delay to a cascading menu mouseout

Replies(1)

Re: Adding a delay to a cascading menu mouseout

Statistics

Tags

Actions