JSFiddle - React, Tailwind, and code Playground

by Suresh Pattu

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

$('#menuBtn').click(function(e) {
		e.stopPropagation();
	    $('.navMenuSecWrapper').fadeToggle();
	    return false;
	});

	$(document).click(function() {
	    $('.navMenuSecWrapper').fadeOut();
	});