SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onMouseout delay for div menu box?

    I want to make my drop down box similar to the one seen at http://www.gamewearteamsports.com/

    The menu links act as normal links but will drop down to a div box when a person hovers over the link. The box will appear when the person hovers it but SHOULD disappear once the person does not hover over the box anymore. So if the person hovers over another link, the box should disappear. I added a delay timeout to one of my div boxes and the box stays alive for a couple of seconds but then closes back up again even though I'm still hovering over it. Any ideas?

    My js:

    Code:
    <script type="text/javascript">
    function drop(which)
    {
        document.getElementById("drop" + which).style.display = "block";
    }
    function undrop(which)
    {
        document.getElementById("drop" + which).style.display = "none";
    }
    
    
    </script>
    My menu links code:

    Code:
    <ul id="head1" style="width:940px;">
        <li><a href="#" onmouseover="drop(1)">Basketball</a></li>
       <li><a href="#" onmouseover="drop(2)" onmouseout="undrop(2)">Football</a></li>
        <li><a href="#" onmouseover="drop(3)" onmouseout="undrop(3)">Volleyball</a></li>
        <li><a href="#" onmouseover="drop(4)" onmouseout="undrop(4)">Soccer</a></li>
        <li><a href="#" onmouseover="drop(5)" onmouseout="undrop(5)">Baseball</a></li>
        <li><a href="#" onmouseover="drop(6)" onmouseout="undrop(6)">Hockey</a></li>
        <li><a href="#" onmouseover="drop(7)" onmouseout="undrop(7)">Training</a></li>
    The code I have for the first link:

    Code:
        <div id="drop1" onmouseout="setTimeout('undrop(\'1\')', 3000);" style="z-index:3000;">
    There's a table with content in it inside the div. There's a </ul> tag that closes out the menu links.

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .drop {
      width:300px;height:100px;font-Size:80px;background-Color:red;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    function drop(which){
      var obj=document.getElementById("drop" + which);
      obj.style.display = "block";
      clearTimeout(obj.to);
    }
    
    function undrop(which){
      var obj=document.getElementById("drop" + which);
      obj.to=setTimeout(function(){ obj.style.display = "none"; },500);
    }
    
    
    </script></head>
    
    <body>
    <ul id="head1" style="width:940px;">
        <li><a href="#" onmouseover="drop(1)">Basketball</a></li>
       <li><a href="#" onmouseover="drop(2)" onmouseout="undrop(2)">Football</a></li>
        <li><a href="#" onmouseover="drop(3)" onmouseout="undrop(3)">Volleyball</a></li>
        <li><a href="#" onmouseover="drop(4)" onmouseout="undrop(4)">Soccer</a></li>
        <li><a href="#" onmouseover="drop(5)" onmouseout="undrop(5)">Baseball</a></li>
        <li><a href="#" onmouseover="drop(6)" onmouseout="undrop(6)">Hockey</a></li>
        <li><a href="#" onmouseover="drop(7)" onmouseout="undrop(7)">Training</a></li>
     </ul>
    <div class="drop" id="drop1" >Drop 1</div>
    <div class="drop" id="drop2" >Drop 2</div>
    <div class="drop" id="drop3" >Drop 3</div>
    <div class="drop" id="drop4" >Drop 4</div>
    <div class="drop" id="drop5" >Drop 5</div>
    <div class="drop" id="drop6" >Drop 6</div>
    <div class="drop" id="drop7" >Drop 7</div>
    </body>
    
    </html>
    </body>
    
    </html>

  3. #3
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Didn't work I hovered outside the div box but the box didn't close...

    I'm using a jquery image slider right below the menu...not sure if it is preventing the div box from working properly. The image slider that I am using can be seen here.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •