Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts

    DropDown menu mouseout problem

    Hey, I'm having a problem with a dropdown menu I made.
    Whenever I hover my mouse on the object, the menu opens but when I only move my mouse between the li elements, the menu closes itself.

    Here's the code:
    Code:
    function DropDown(opts,obj)
    {
        var objTop = obj.offsetHeight + findPos(obj)[1];
        var objLeft = findPos(obj)[0];
        opts.style.top = objTop + "px";
        opts.style.left = objLeft + "px";
        obj.onmouseover = function(e)
        {
            opts.style.display = "block";
        };
        opts.onmouseout = function(e)
        {
            e.stopPropagation();
            
            opts.style.display = "none";
        };
        opts.style.cursor = "pointer";
    }
    And the HTML:
    Code:
                <ul>
                    <li id="dd_prefab"><a href="contact.asp">pre-fab</a></li>
                    <li id="dd_other"><a href="contact.asp">other</a></li>
                </ul>
    
        <div id="dd_m" class="DropDown">
            <ul>
                <li><a href="projects.asp">Models</a></li>
            </ul>
        </div>
        <div id="dd_o" class="DropDown">
            <ul>
                <li>Favorites</li>
                <li>Links</li>
                <li>More</li>
            </ul>
        </div>
        <script type="text/javascript">
        DropDown($("dd_m"),$("dd_prefab"));
        DropDown($("dd_o"),$("dd_other"));
        </script>
    And the CSS:
    Code:
    div.DropDown
    {
        background-color: Black;
        display: none;
        position: absolute;
        z-index: 100;
        
    }
    div.DropDown ul li{list-style-type:none;}
    div.DropDown ul li a{color:Gray; display: block; width: 100&#37;;}
    div.DropDown ul li a:hover{color:White;}
    I'd really appreciate if someone gave me a hand on this one.

    Thanks.

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Code:
    function DropDown(opts,obj)
    {
        var objTop = obj.offsetHeight + findPos(obj)[1];
        var objLeft = findPos(obj)[0];
        opts.style.top = objTop + "px";
        opts.style.left = objLeft + "px";
        obj.onmouseover = function(e)
        {
            opts.style.display = "block";
        };
        opts.onmouseout = function(e)
        {
            if(!contains(this, e.relatedTarget || window.event.srcElement))
            {
              e.stopPropagation();
            
              opts.style.display = "none";
            }
        };
        opts.style.cursor = "pointer";
    }
    function contains(e, c)
    {
      return (e == c) ?
        true :
        (c.parentNode) ?
          contains(e, c.parentNode) :
          false;
    }
    dumpfi
    "Failure is not an option. It comes bundled with the software."
    ....../)/)..(\__/).(\(\................../)_/)......
    .....(-.-).(='.'=).(-.-)................(o.O)...../<)
    ....(.).(.)("}_("}(.)(.)...............(.)_(.))Ż/.
    ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
    Little did the bunnies suspect that one of them was a psychotic mass murderer with a 6 ft. axe.

  • Users who have thanked dumpfi for this post:

    BarrMan (08-30-2008)

  • #3
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Thanks a lot!


  •  

    Posting Permissions

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