Igorsrt, с оригинала взято немного, в основном только идея и ссылки на картинки ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #DCDCDC;
position: relative;
}
#menu_bg {
background-image: url(https://cdn-media.etagi.com/static/site/8/82/8272a1aa41292125e4f82ded81f1245f29ba0aef.png);
position: fixed;
width: 238px;
height: 461px;
top: 15%;
right: -158px;
z-index: 11;
text-align: center;
}
#menu_label, #menu_label2{
margin-left: -150px;
font-size: 18px;
color:#fff;
margin-top: 200px;
}
#menu_label:before ,#menu_label2:before {
margin-left: 160px;
content: "";
display: block;
width: 70px;
height: 18px;
background-image: url(https://cdn-media.etagi.com/static/site/6/6e/6e1d0ec006b0a589258ddc86d92e9af2b54e8b2c.png);
background-repeat: no-repeat;
}
#menu_label2{
display: none;
margin-top: 210px;
z-index: 10;
}
#menu_label2:before {
background-image: url(https://cdn-media.etagi.com/site/9/18/0/0/0/0/0/0/0/0/44fdaf9fe2bb8bcfb2677ddbefa1baa675231f2a.png);
}
#menuFixed {
color: #FFFFFF;
position: absolute;
width: 200px;
height: 200px;
top: 120px;
right: -238px;
text-align: right;
padding-right: 8px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var menuFixed = $("#menuFixed"),
lab = $("#menu_label"),
lab2 = $("#menu_label2"),
menu = $("#menu_bg");
lab.click(function() {
lab.fadeOut();
menu.animate({
right: 0
}, 1000, function() {
menuFixed.animate({
right: 0
}, 600);
lab2.fadeIn()
})
});
lab2.click(function() {
menuFixed.animate({
right: -238
}, 1000, function() {
menu.animate({
right: -158
}, 800);
lab2.fadeOut(300,function() {lab.fadeIn()});
})
})
});
</script>
</head>
<body>
<div id="menu_bg">
<div id="menu_label" >написать</div>
<div id="menu_label2" ></div>
<div id="menuFixed" ><h3>Мы в Viber</h3></div>
</div>
</body>
</html>
