<div class="messenger">
<div title="Чат с менеджером" class="messenger-btn"><img src="https://img.icons8.com/ios/50/imessage--v1.png"/></div>
<div id="messenger-links" class="messenger-links">
<a title="Telegram" href="https://t.me/название аккаунта Телеграм
src="https://img.icons8.com/color/144/null/telegram-app--v1.png"/></a>
<a title="Whatsapp" href="whatsapp://send?phone=ХХХХХХХХХХ"><img src="https://img.icons8.com/color/144/null/whatsapp--v1.png"/></a>
<a title="Instagram" href="https://ig.me/m/название аккаунта Instagram"><img src="https://img.icons8.com/fluency/48/instagram-new.png"/></a>
</div>
</div>
<style>
.messenger {
display: block;
position: fixed;
right: 2%;
bottom: 5%;
width: 180px;
height: 60px;
z-index: 1000;
/* overflow: hidden; */
}
.messenger-btn {
padding: 14px;
display: block;
width: 40px;
height: 40px;
border-radius: 60px;
border: 2px solid black;
background-color: #ffffff;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
z-index: 1000;
}
.messenger-btn img {
width: 38px;
height: 38px;
z-index: 1000;
}
.messenger-links {
position: absolute;
left: 50px;
top: 10px;
width: 200px;
transform: scale(0);
transform-origin: 100% 50%;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
z-index: 0;
}
.messenger-links.show {
left: 0;
transform: scale(1);
}
.messenger-links a {
width: 50px;
margin-left: 4px;
}
.messenger-links img {
max-width: 40px;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.messenger-links a:hover img {
transform: scale(1.1);
text-decoration: none;
}
</style>
<script>
var menuBtn = $('.messenger-btn'),
menu = $('.messenger-links');
menuBtn.on('click', function() {
if ( menu.hasClass('show') ) {
menu.removeClass('show');
} else {
menu.addClass('show');
}
});
$(document).mouseup(function (e){
var div = $('.messenger');
if (!div.is(e.target)
&& div.has(e.target).length === 0) {
$('.messenger-links').removeClass('show');
}
});
</script>