JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

<div class="mobileDevice">
    
    <span style="margin-left:100px;">IPHONE 5</span>
    <div id="button" class="fixedMenu">
        |||
    </div>
    
    <div class="menu" id="target">menu1<br>menu2<br>menu</div>
</div>

CSS

.mobileDevice{
    width:300px;
    height:700px;
    background-color:#eee;
    border:1px solid #000;
    padding-top:10px;
}

.fixedMenu{
    position:fixed;
    width:30px;
    height:100px;
    background-color:#512b1b;
    float:left;
    margin-left:0px;
    margin-top:30px;
    text-align:center;
    color:#FFF;
    line-height:100px;
}


.fixedMenu:hover{
    cursor:pointer;
}

.menu{
    left:0px;
    overflow: hidden;
    margin-top: 30px;
    margin-left: 30px;
    width:80px;
    background-color:gray;
    color:#FFF;    
    padding-left:20px;
    display:none;
}

JavaScript

$( "#button" ).click(function() {
        $(".menu").toggle("slide");      
});