JSFiddle - React, Tailwind, and code Playground

HTML

<div id="button">
    <div id="s_panel">
        <a href="">Home</a>
    </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;
    padding: 10px 0 0 0;
    }
#s_panel {
    position: fixed;
    top: 0px;
    left: -150px;
    background: #ff7700;
    width: 150px;
    height: 70px;
    padding: 10px 0 0 0;
}

JavaScript

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