Question

I have a horizontal menu that contains “buttons”. Clicking on the button opens a sub-menu (opening menu on hover is NOT required). When the same button is clicked, the sub-menus are hidden, like this:

Markup

<div class="toolbar">
  <div class="popout-wrap">
    <div class="button">
    </div>
    <div class="popout">
      blah blah blah
    </div>
  </div>
  <div class="popout-wrap">
    <div class="button">
    </div>
    <div class="popout">
      blah blah blah
    </div>
  </div>
  ...

jQuery code

$(".popout-wrap .button").click(function () {
    var menu = $(this).siblings(".popout");
    if (menu.is(":hidden")) {
        $(".popout").not(":hidden").fadeOut("fast");
        menu.css("top", -1 * (menu.outerHeight() + 8) + "px");
        menu.fadeIn("fast");
    } else {
        menu.fadeOut("fast");
    }
    return false;
});

Asking the user to click on the same button to hide its corresponding sub-menu is not very intuitive. What’s the best way to make it more intuitive/instinctive/easy to use? I thought clicking anywhere in the document would dismiss the popup menu but not sure if (i) it is a good idea (ii) if it is then how to implement it.

Answer 1

mouse out is ok but i would also connect it with the click anywhere in the document as thats how popups works on most OS:

//to prevent hiding when clicking on popup but it is not necessary 
//$(".popout-wrap .popout").click()(function(){return false});

$(document).click(function(){
    var menu = $(".popout-wrap .popout");
    if (menu.is(":visible")) {
        menu.fadeOut("fast");
    }
    return false;
});