JSFiddle - React, Tailwind, and code Playground

by Afzaal Ahmad Zeeshan

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').click(function () {
   $('#menu-wrapper').toggle();
});