Member Avatar for HarryGabriel91

Hello guys!

I want to create a dropdown menu to my site and I did it with JS instead of CSS because some functionality was needed that is'nt available in CSS, so I wrote it completely in JS (the styling is in CSS of course).

Now, after I've ironed out a lot of kinks, it seems it works. More or less. I think the last problem I have is the following:
when the pointer hovers a button/image (call it what you like) in the navigation bar, a submenu appears. That's working fine. If the mouse goes OUT of the submenu, the submenu shall hide, so I thought I'd use the onmouseout event. Here came some problems. The submenu contains elements, too, that's normal, but it's a strange (however standard-folowing) behavior, that if the mouse pointer hovers a submenu element, an onmouseut event is fired, so in the first version the submenu was hidden in this case.

I found a solution (I had to make some changes though) to this problem on this site. With that script the submenu doesn't disappear if the mouse hovers an element inside, and it disappears if the mouse goes really out of it. Here is my problem: the mouse has to go slowly. If the mouse goes fast (for example the pointer is over the text, and you pull your mouse fast out of it), it doesn't disappear. It stays there, and you can open the neighbour submenu on the top of it (they are quite wide). I think the browser doesn't fire the appropriate event, because it's going fast and it can't feel that the pointer went over the submenu's box. What can I do, to make the submenu disappear in this case, too?

I've got some ideas, but I've run into problems when I tried to bring them into effect:
- check the mouse position eg. every 3 seconds and hide the submenu if it's needed (problem: to be able to see the mouse position, you need an event)
- bind a handling routine to the body element's onmousemove event and hide the active submenu if it's needed (problem: this may increase the CPU usage sharply and produce slower homepage)
- close the active submenu if you open an another (problem: that's not a real solution)

Anyway, any help would be appreciated, thank you in advance.

  • 1 Contributor
  • 1 Reply
  • 207 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by HarryGabriel91
Member Avatar for HarryGabriel91

Problem solved. :) :) :)

For the onmouseout event handler on the submenu's box the setTimeout() function should be used (which call hides the box), eg. with 313 ms timeout, and one should bind an onmouseover handler, too, which cancels the timeout with the clearTimeout() function.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.