JSFiddle - React, Tailwind, and code Playground

by avrahamcool

HTML

<div id="btn-toggle-menu">Menu</div>
<div id="menu-wrapper">
    <ul>
        <li>link item</li>
        <li>link item</li>
        <li>link item</li>
        <li>link item</li>
        <li>link item</li>
        <li>link item</li>
    </ul>
</div>
<div id="content"></div>

CSS

#btn-toggle-menu {
    position:fixed;
    top:0;
    left:0;
    width:13px;
    line-height:15px;
    cursor:pointer;
    border:1px solid #333;
    background-color:#ccc;
    text-align:center;
    word-wrap: break-word;
}
#btn-toggle-menu:hover,
#btn-toggle-menu:focus {
    background-color:#ddd;
}
#menu-wrapper {
    position:fixed;
    top:0;
    left:25px;
    border:1px solid #333;
    background-color:#ccc;
}
ul {
    margin:0;
    list-style-type:none;
}
#menu-wrapper li:hover,
#menu-wrapper li:focus {
    background-color:#ddd;
}

JavaScript

$('#menu-wrapper').hide();

$('#btn-toggle-menu').on('click', function(e)
                         {
    var menu = $('#menu-wrapper');
    if(menu.is(':hidden')) {
        menu.css("display", "");
    } else {
        menu.css("display", "none");
    }
});