How to close a list menu on mouseout using jQuery.

Question

Hi all,

I have the following scenario:

<div class="dropMenuWrapper_content">
<img src="images/dropMenu.gif" class="menu_head_content" />
<ul class="menu_body_content scroll-pane" id="SmallDropDown">
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/0.aspx"&gt;1&lt;/a&gt;&lt;/li&gt;
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/1.aspx"&gt;2&lt;/a&gt;&lt;/li&gt;
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/2.aspx"&gt;3&lt;/a&gt;&lt;/li&gt;
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/3.aspx"&gt;4&lt;/a&gt;&lt;/li&gt;
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/4.aspx"&gt;5&lt;/a&gt;&lt;/li&gt;
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/5.aspx"&gt;6&lt;/a&gt;&lt;/li&gt;
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/6.aspx"&gt;7&lt;/a&gt;&lt;/li&gt;
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/7.aspx"&gt;8&lt;/a&gt;&lt;/li&gt;
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/8.aspx"&gt;9&lt;/a&gt;&lt;/li&gt;
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/9.aspx"&gt;10&lt;/a&gt;&lt;/li&gt;
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/10.aspx"&gt;11&lt;/a&gt;&lt;/li&gt;
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/11.aspx"&gt;12&lt;/a&gt;&lt;/li&gt;
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/12.aspx"&gt;13&lt;/a&gt;&lt;/li&gt;
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/13.aspx"&gt;14&lt;/a&gt;&lt;/li&gt;
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/14.aspx"&gt;15&lt;/a&gt;&lt;/li&gt;
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/15.aspx"&gt;16&lt;/a&gt;&lt;/li&gt;
  <li><a class="modalWindow cboxElement" href="http://mysite.com/service/16.aspx"&gt;17&lt;/a&gt;&lt;/li&gt;
</ul>

When I click on the dropMenu image, the list opens up to show me a drop down menu using jQuery. All's working well except when I move off of either the image or the list itself, I need it to close the menu. I already have my function to close the menu when you click on the image again, but I need it close when you move off of the image or the list.

I thought that I could use the dropMenuWrapp_content div to as this stretches with the content when it is open so that when you mouse out of that div it will close but it's very buggy.

In Flash, I would setup a hitTest to see where the mouse is and if it's no longer on that area, the drop menu would close.

Is there a better way for me to check this using jQuery?

Many thanks!

Answer 1

Add the "click on close handler" to the BODY tag. This way, the menu will close when you click anywhere outside the menu.

Answer 2

Ayaz's answer worked great for me!

if you can change event to mouseover and mouseleave then it can be done by toggle function of jQuery

Thanks! –

Answer 3

If you make the dropdown options children of the button that opens the menu, then add a mouseout/mouseleave event listener to the button that opens the menu, that listener should apply if the mouse is outside of the button that opens the menu and the children since they are now part of the menu. However, an <img> tag can't have children unless you add them dynamically, so you should change the <img> tag to a different tag that can have children (but not a block-level element) and specify the image using the CSS background-image property.

Another option would be to add a mouseover/mouseenter and a mouseout/mouseleave listener on the image and the menu and set a timeout after each mouseout/mouseleave for about 1 second that will check for a variable set by the mouseover/mouseenter handler and see if it changed - if so, then there has been another mouseover/mouseenter (ie. the user moved their mouse off the image, triggering the mouseout/mouseleave, but then moved it on the menu, triggering the mouseover/mouseenter). For example:

<img src="images/dropMenu.gif" class="menu_head_content" />
<ul class="menu_body_content scroll-pane" id="SmallDropDown">
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/0.aspx"&gt;1&lt;/a&gt;&lt;/li&gt;
...
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/16.aspx"&gt;17&lt;/a&gt;&lt;/li&gt;
</ul>

<script type="text/javascript">
// Global var
var is_in_menu = false;

$(function () {
    // Initially hide menu body
    $(".menu_body_content").hide();

    // MouseEnter event handler
    $(".menu_head_content, .menu_body_content").bind("mouseenter", function () {
        is_in_menu = true;
        if ($(".menu_body_content").css("display") == "none") {
            $(".menu_body_content").fadeIn("fast");
        }
    });

    // MouseLeave event handler
    $(".menu_head_content, .menu_body_content").bind("mouseleave", function () {
        is_in_menu = false;
        setTimeout(function () {
            if (is_in_menu === false) {
                $(".menu_body_content").fadeOut("fast");
            }
        }, 1000);
    });

    // Image click handler
    $(".menu_head_content").click(function () {
        is_in_menu = true;
        if ($(".menu_body_content").css("display") == "none") {
            $(".menu_body_content").fadeIn("fast");
        }
    });
});
</script>

Answer 4

mouseover and mouseleave events should solve this issue or better use hover in such scenarios when you have to toggle some contents view. api.jquery.com/hover

  $("img")
        .hover(function(){   
                  Here show code should come     
               },
               function(){           
                    Here show code should come which should hide only if mouse coordinates are              not over menu
                       });