A flyout menu widget for jQuery UI like in Facebook. I call it flydown

jquery.widget.flydown.js

/***************************************************
    jQuery UI Flyout widget like in Facebook
******************************************************/
(function($, undefined) {
    $.widget("ui.flydowns", {
        ///<summary>This is a custom jQuery widget
        ///for flydowns (flyout dropdowns)
        ///usage: $("your_selector").flydowns();
        ///</summary>
        _create: function() {
            var self = this;
            self.element.on("click", ".flyout-menu", function(e) {
                var ul = $(this).children("ul");
                var selected = ul.is(":visible");
                self.collapse();
                if (!selected) {
                    ul.toggle(); // hide or show the list 
                }
            });
            $(document).on("click", function(e) {
                ///<summary>Collapses all dropdowns when blured</summary>
                e = e || window.event;
                var inDropdown = $(e.target).parents().andSelf().hasClass(".flyout-menu");
                if (!inDropdown) {
                    self.collapse();
                }
            });
        },
        _init: function(){
  	},
        collapse: function() {
            this.element.find(".flyout-menu > ul").hide();
        }
    });
})(jQuery);

sample.html

<div class="right menu">
  <div class="flyout-menu">
		<div class="arrow"></div>
		<span class="flyout-menu-title">My menu</span>
		<ul>
			<li><a href="http://google.com">Google</a></li>
			<li><a href="http://bing.com">Bing</a></li>          
		</ul>		    
  </div>
</div> 

sample.js

(function($, undefined) {
  "use strict";
	$(document).on({
		ready: function() {
			$(document).flydowns();
		}
	});
})(jQuery);