0

I've written the following slide menu: http://www.julian-urabl.com/webtest/index.html

It works perfectly except for one behavior I'd like to add:

Onload if the mouse is not being placed over the div-container "menu", the menu should contract afer 1000ms.

I thought about checking, if the mouse was being placed over the div and only on return "false" I'd let the menu slide out via

setTimeout(function(){slide.style.marginLeft="-140px"},1000);

I am totally new to js, but if I understood right neither hover, nor mouseover, nor mouseenter will help solve my problem. Can anyone help me?

user2741341
  • 1
  • can you describe what you actually want to have happen? i.e. you have the menu, you move the mouse over a part of it, then what's supposed to happen? Your description is not quite understandable enough to figure out what the actual problem is. – Mike 'Pomax' Kamermans Sep 03 '13 at 01:20
  • I'll try: Let's call the red
      "nav". Let's call the
      with dashed border "menu". Let's call the state of being expanded (marginLeft:0) "visible". Let's call the state of being contracted (marginLeft:-140px) "hidden". The page loads: Nav is visible. After 1 sec: nav slides to hidden. User moves mouse over menu: nav slides to visible. User moves mouse outside menu: nav slides to hidden. Now there is one exception: If the page loads and the mouse is still over menu (e.g. after hitting "Reload") nav should be prevented from sliding to hidden, instead stay visible until user leaves menu.
     – user2741341 Sep 03 '13 at 02:35

1 Answers1

0

This is what I would do:

Onload, check the location of the mouse (e.g http://www.codelifter.com/main/javascript/capturemouseposition1.html). Though I would suggest you start using jquery for the same.

Once you are at the point where you can get the mouse location, you need to make sure that the mouse if not inside the coordinates of the menu. To do that you can see this.

After that its simple, if the mouse coordinates are inside these coordinates, then don't let the menu slide in, if that is not the case let the menu slide in.

Community
  • 1
  • 1
Neeraj
  • 8,408
  • 8
  • 41
  • 69
  • Thanks for your suggestion. I thought about a similar solution already, but I am wondering, if this would cause any problems since the "menu"-div is positioned using "top:50%" (on the original page it's even placed using both "top:50%" and "left:50%"). Is there no possibility to refer to the actual element, while detecting if the cursor points on it, without hovering? – user2741341 Sep 03 '13 at 02:08
  • You would have to start using frameworks like jquery if you want to do that. – Neeraj Sep 03 '13 at 02:51