javascript hide dropdown menu on timeout

Question

thank you for taking time to help me out, i don't have much knowledge in javascript, however i'm trying to make a huge menu for my website, the menu will have many submenus and the submenus will have submenus , i know it seems crazy. anywy, the fortunate thing is i found a js code for my menu, the issue is it's on onmouseover mode( hover) and it's not convenient for my website visitors to browse through the menu bcs it's so huge, i was wondering if any of you can tweak this code a bit and make the menu disappears after a certain timeout let's say 5 seconds. Because the issue now is when the visitor browses the menu, once the mouse pointer is a bit out of the menu , the menu gets hidden, i want to set a timeout before it get hidden. thank you in advance! cheers

this is the js code

var mcVM_options = {
  menuId: "menu-v",
  alignWithMainMenu: false
};

init_v_menu(mcVM_options);

function init_v_menu(a) {
  if (window.addEventListener) window.addEventListener("load", function() {
    start_v_menu(a)
  }, false);
  else window.attachEvent && window.attachEvent("onload", function() {
    start_v_menu(a)
  })
}

function start_v_menu(i) {
  var e = document.getElementById(i.menuId),
    j = e.offsetHeight,
    b = e.getElementsByTagName("ul"),
    g = /msie|MSIE 6/.test(navigator.userAgent);
  if (g)
    for (var h = e.getElementsByTagName("li"), a = 0, l = h.length; a < l; a++) {
      h[a].onmouseover = function() {
        this.className = "onhover"
      };
      h[a].onmouseout = function() {
        this.className = ""
      }
    }
  for (var k = function(a, b) {
      if (a.id == i.menuId) return b;
      else {
        b += a.offsetTop;
        return k(a.parentNode.parentNode, b)
      }
    }, a = 0; a < b.length; a++) {
    var c = b[a].parentNode;
    c.getElementsByTagName("a")[0].className += " arrow";
    b[a].style.left = c.offsetWidth + "px";
    b[a].style.top = c.offsetTop + "px";
    if (i.alignWithMainMenu) {
      var d = k(c.parentNode, 0);
      if (b[a].offsetTop + b[a].offsetHeight + d > j) {
        var f;
        if (b[a].offsetHeight > j) f = -d;
        else f = j - b[a].offsetHeight - d;
        b[a].style.top = f + "px"
      }
    }
    c.onmouseover = function() {
      if (g) this.className = "onhover";
      var a = this.getElementsByTagName("ul")[0];
      if (a) {
        a.style.visibility = "visible";
        a.style.display = "block"
      }
    };
    c.onmouseout = function() {
      if (g) this.className = "";
      this.getElementsByTagName("ul")[0].style.visibility = "hidden";
      this.getElementsByTagName("ul")[0].style.display = "none"
    }
  }
  for (var a = b.length - 1; a > -1; a--) b[a].style.display = "none"
}

Maybe u can search on this topic? http://stackoverflow.com/questions/820951/hide-div-after-a-few-seconds If u have some problem, tell me — Julien gtr, Apr 12 '16 at 07:21

Al Foиce ѫ · Answer 1 · 2016-04-12T08:00:07.187

0

Your code is not very understandable for me (variables don't have meaning), but I guess you have to change this part of code

c.onmouseout = function() {
    if (g) this.className = "";
    this.getElementsByTagName("ul")[0].style.visibility = "hidden";
    this.getElementsByTagName("ul")[0].style.display = "none"
}

to something like

c.onmouseout = function() {
    setTimeout(function(){
        var g= g = /msie|MSIE 6/.test(navigator.userAgent);
        if (g) this.className = "";
        this.getElementsByTagName("ul")[0].style.visibility = "hidden";
        this.getElementsByTagName("ul")[0].style.display = "none" ;
    }.bind(this), 5000);
}

edited Apr 12 '16 at 08:00

answered Apr 12 '16 at 07:25

Al Foиce ѫ

4,195
12
39
49

:( not working, guys is it easier to make the menu hides when the user clicks out of the menu? i think it's still safer than hovering out from the menu, please help me, thank you ! – Uncle Sam Apr 12 '16 at 07:36
of course. When I wrote 'something like', it means you have to adapt our code. I don't know what is the `g`variable, but it have to be redefined in the setTimeout callback. I just fixed my answer. – Al Foиce ѫ Apr 12 '16 at 07:58

score 0 · Accepted Answer · answered Apr 12 '16 at 07:29

try adding setTimeOut method to your code. You can find more details on the link below: http://www.w3schools.com/jsref/met_win_settimeout.asp

Please find the edited code below:

init_v_menu(mcVM_options);

function init_v_menu(a) {
if (window.addEventListener) window.addEventListener("load", function() {
    start_v_menu(a)
}, false);
else window.attachEvent && window.attachEvent("onload", function() {
    start_v_menu(a)
})
}

function start_v_menu(i) {
var e = document.getElementById(i.menuId),
    j = e.offsetHeight,
    b = e.getElementsByTagName("ul"),
    g = /msie|MSIE 6/.test(navigator.userAgent);
if (g)
    for (var h = e.getElementsByTagName("li"), a = 0, l = h.length; aj) {
        var f;
        if (b[a].offsetHeight > j) f = -d;
        else f = j - b[a].offsetHeight - d;
        b[a].style.top = f + "px"
    }
}
c.onmouseover = function() {
if (g) this.className = "onhover";
var a = this.getElementsByTagName("ul")[0];
if (a) {
    a.style.visibility = "visible";
    a.style.display = "block"
}
};
c.onmouseout = function() {
setTimeout(function() {
    if (g) this.className = "";
    this.getElementsByTagName("ul")[0].style.visibility = "hidden";
    this.getElementsByTagName("ul")[0].style.display = "none"
}, 3000);
}
}
 for (var a = b.length - 1; a > -1; a--) b[a].style.display = "none"
}

javascript hide dropdown menu on timeout

2 Answers2