P
Size: a a a
P
P
P
СШ
P
EG
P
СШ
P
Y
<div class="messagengers">
<div class="messagengers__wrap">
<div class="messagengers__hide">
<a class="messagengers__link">
<img class="messagengers__logo" src="/assets/images/m_youtube.svg" alt="" role="presentation"/>
<img class="messagengers__close" src="/assets/images/m_close.svg" alt="" role="presentation"/>
</a>
<a class="messagengers__link">
<img class="messagengers__logo" src="/assets/images/m_instagram.svg" alt="" role="presentation"/>
<img class="messagengers__close" src="/assets/images/m_close.svg" alt="" role="presentation"/>
</a>
<a class="messagengers__link">
<img class="messagengers__logo" src="/assets/images/m_facebook.svg" alt="" role="presentation"/>
<img class="messagengers__close" src="/assets/images/m_close.svg" alt="" role="presentation"/>
</a>
<a class="messagengers__link">
<img class="messagengers__logo" src="/assets/images/m_chat.svg" alt="" role="presentation"/>
<img class="messagengers__close" src="/assets/images/m_close.svg" alt="" role="presentation"/>
</a>
<a class="messagengers__link">
<img class="messagengers__logo" src="/assets/images/m_youtube.svg" alt="" role="presentation"/>
<img class="messagengers__close" src="/assets/images/m_close.svg" alt="" role="presentation"/>
</a>
</div>
<a class="messagengers__phone"><img src="/assets/images/m_phone.svg" alt=""></a>
</div>
.messagengers {
cursor: pointer;
position: absolute;
bottom: -60px;
right: 60px;
&.active {
.messagengers__hide {
display: flex;
}
}
&:hover {
.messagengers__link {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.21);
}
}
&__wrap {
display: flex;
justify-content: flex-end;
flex-direction: column;
}
&__phone {
margin-top: 8px;
}
&__hide {
display: none;
flex-direction: column;
}
&__link {
border-radius: 30px;
margin-bottom: 12px;
&.closed {
.messagengers__logo {
display: none;
}
.messagengers__close {
display: block;
}
}
}
&__close {
display: none;
}
}
$('.messagengers__phone').click(function () {
$('.messagengers').addClass('active');
});
$('.messagengers__link').click(function () {
$('.messagengers__link').removeClass('closed');
$(this).addClass('closed');
});
ИБ
DZ
ИБ
DZ
ПП
Е
КШ
w=150&h=200&far=C&bg=fff
]]