JSFiddle - React, Tailwind, and code Playground

by Gonzalo

HTML

<button id="menuBtn">Menu</button>
<div class="navMenuSecWrapper">
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Browse</li>
        <li>Contact</li>
    </ul>
</div>

CSS

.navMenuSecWrapper{
    display:none;
}
.navMenuSecWrapper ul{
    width: 200px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    float: left;
    margin: 8px 0px;
    padding: 5px 5px 0px 5px;
    background: #eee;
}
.navMenuSecWrapper ul > li{
    list-style:none;
    padding:8px 13px;
    background:#eee;
    color:#666;
    font-size:12pt;
    border-bottom:1px solid #ddd;
}

JavaScript

$.fn.extend({
// Calls the handler function if the user has clicked outside the object (and not on any of the exceptions)
clickOutside: function(handler, exceptions) {
    var $this = this;

    $("body").bind("click", function(event) {
        if (exceptions && $.inArray(event.target, exceptions) > -1) {
            return;
        } else if ($.contains($this[0], event.target)) {
            return;
        } else {
            handler(event, $this);
        }
    });

    return this;
}
   });
$("body").clickOutside(function(event, obj) { obj.fadeOut() });