JSFiddle - React, Tailwind, and code Playground

by pivanov

HTML

<div id="sitenav">
    <div id="menu"></div>
    <div class="black-bar">            
        <span id="toggle-button">Open</span>
    </div>
</div>
<div id="overlay"></div>

CSS

body {
    background: #ccc;   
}

#sitenav {
    position:absolute;
    top:0;right:0;left:0;
    height:30px;
    background:black;
    z-index:10;
    border-bottom:1px solid red;
}

.black-bar {
    position:relative;                
    width:600px;
    margin:0 auto;
    text-align:center;
    background:black;
}

#toggle-button {
    color: white;
    line-height:30px;
    cursor:pointer;
}

#menu {
    position:absolute;
    top:-180px;
    left:50%;
    margin-left:-300px;
    width:598px;        
    height:198px;
    background:black;
    border:1px solid red;
}

#overlay {
    display:none;
    position:absolute;
    top:0;right:0;bottom:0;left:0;
    background:black;
    z-index:5;    
}

JavaScript

var button = $('#toggle-button'),
    menu = $('#menu'),
    overlay = $('#overlay'),
    state = false;

button.click( function(){
    if (!state) {
        //menu is not open
        overlay.not(':animated').fadeTo('500', 0.8, function () {
            menu.not(':animated').animate({ top: 0 });
            button.text('Close');
            state = true;
        });

    }
    else
    {
        //menu is open
        menu.not(':animated').animate({top : -180}, function () {
            overlay.not(':animated').fadeOut();
            button.text('Open');            
            state = false;
        });
    }
});

overlay.click( function () {
    button.click();
});