CODEWITHSUNDEEP
javascript
gyaani_guy
gyaani_guy

Reputation: 3209

Trying to make a onmouseover javascript drop down menu

Effect I want . Basically I want to popup a simple menu when the user mouseovers a link . I tried several ready made scripts , but had trouble integrating them with my site. SO decided to built my own. here is what I am trying to do:

   <li onmouseover=showlist1() onmouseout=hidelist1() ><a class="navigation"  href="show_delhi_items.php">Menu heading</a></li>

 function showlist1() //onmouseover
  {
     
      document.getElementById('list1').style.visibility='visible' ;
     
  }
  function hidelist1() //onmouseout
  {
      if (menu elements don't have focus)
      {
      document.getElementById('list1').style.visibility='hidden' ;
      }
  }

now in this how do I implement the 'menu elements don't have focus' part ? I know its not possible to know which elemtn has focus. so I need an alternative. Basically the problem is that as soon as the mouse moves outside the main link(the link that popups the hidden menu), the menu hides. what i want is for the menu to remain visible if it gets focus. but currently it gets hidden as soon as the mouse outside our main link

hope I was clear enough.

Upvotes: 1

Views: 3181

Answers (2)

Sparafusile
Sparafusile

Reputation: 4956

Make the menu overlap the list item that has the onmouseover menu. Then only close the menu if the mouse is outside both the list item and the menu. You will have to use:

position: absolute;
top: some-y-value;
left: some-x-value;

Upvotes: 1

Martin Jespersen
Martin Jespersen

Reputation: 26183

Hmm now I made that comment i better back it up with an actual way of doing it :)

Go here and read all about suckerfish dropdowns

Go here to see an example implementation

Upvotes: 1

Related Questions