JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fon">
<div id="button">
    <div id="s_panel">
        <a href="">Home</a>
    </div>
</div>
<div id="knopka">Кнопка</div>
</div>

CSS

#button {
    position: fixed;
    top: 0px;
    left: 0px;
    background: #ff7700;
    width: 70px;
    height: 70px;
    font: 40px Georgia;
    color: #fff;
    text-align: center;
    border-radius: 0 5px 5px 0;
    background-image: url(http://www.qwa7.net/images/user_upload/homepage.png);
    background-repeat: no-repeat;
    background-position: center;
    }
#s_panel {
    position: fixed;
    top: 0px;
    left: -150px;
    background: #ff7700;
    width: 150px;
    height: 60px;
    padding: 10px 0 0 0;
}
#knopka {
text-decoration:none; 
text-align:center; 
padding:15px; 
border:none; 
color: #fdd453;
font-size:18px;
cursor:pointer;
margin-top: 10px;
background-color:#885; 
}

JavaScript

$('#button').hover(function(){
    $("#s_panel, #button").animate({left: "0px"},{queue:false,duration:500});
    $("#button").animate({left: "150px"},{queue:false,duration:500});
},function(){
    $("#s_panel").animate({left: "-150px"},{queue:false,duration:500});
    $("#button").animate({left: "0px"},{queue:false,duration:500});
});