Chia sẻ các bạn code liên hệ hiển thị chính giữa bên trái màn hình, các bạn chèn code vào tiện ích HTML/JavaScript chỉnh sửa lại thông tin liên hệ là xong.
Để dễ hình dung hơn, lúc trang tải xong trang chỉ hiển thị chữ Liên hệ như thế này
Khi hover vào đấy, phần nội dung sẽ chạy ra không hover nữa nó sẽ chạy vào tương tự như dropdown menu vậy đó.
Code liên hệ
<style>
/* <![CDATA[ */
.flex {
display: -ms-flexbox;
display: -webkit-flex;
display: flex
}
.align-center {
-webkit-align-items: center;
align-items: center
}
.flex-align {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.flex-center {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
justify-content: center
}
.text-center {
text-align: center
}
.w-50 {
float: left;
width: 50%
}
.zalo-icon:before,
.contact-icon:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 48px;
height: 48px;
background-position: center center;
background-repeat: no-repeat
}
.zalo-icon:before {
background-color: #018fe5;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 97.4 87.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath fill='%23fff' d='M78.4,42c-1.4,0-2.4,0.6-3.2,1.7c-0.7,1-1,2.2-1,3.7c0,1.5,0.3,2.7,1,3.7c0.8,1.2,1.8,1.7,3.2,1.7 c1.4,0,2.5-0.6,3.2-1.7c0.7-1,1-2.2,1-3.7c0-1.4-0.3-2.6-1-3.6C80.8,42.6,79.7,42,78.4,42z' fill-rule='evenodd'%3E%3C/path%3E%3Cpath fill='%23fff' d='M48.8,0C21.9,0,0,19.5,0,43.6c0,11.9,5.4,22.7,14,30.6c2.2,2-5.4,10.5-9,11.3c10.4,2.9,20.7-3.4,23.2-2.4 c6.2,2.6,13.2,4,20.5,4c26.9,0,48.7-19.5,48.7-43.6C97.5,19.5,75.7,0,48.8,0z M27.8,58.2H14.6c-3.1,0-4.6-1.1-4.6-3.3 c0-1,0.6-2.4,1.8-4l11.8-15.6h-8.5c-3.1,0-4.7-1-4.7-3c0-2,1.6-3,4.7-3h11.2c3.8,0,5.7,1.1,5.7,3.2c0,1-0.6,2.3-1.9,4L18.5,52.2 h9.3c3.1,0,4.7,1,4.7,3C32.5,57.2,30.9,58.2,27.8,58.2z M54.9,53.8c0,3.1-1.1,4.7-3.2,4.7c-1.4,0-2.4-0.7-3.1-2.2 c-1.3,1.6-3.1,2.4-5.4,2.4c-2.9,0-5.3-1.2-7.2-3.5c-1.7-2.2-2.5-4.8-2.5-7.8c0-3,0.9-5.6,2.7-7.8c1.9-2.3,4.3-3.5,7.3-3.5 c2.2,0,3.9,0.8,5.1,2.3c0.7-1.4,1.8-2,3.1-2c2.1,0,3.2,1.5,3.2,4.6V53.8z M64.7,53.8c0,3.1-1.1,4.7-3.2,4.7c-2.1,0-3.2-1.6-3.2-4.7 V31.9c0-3.1,1.1-4.7,3.2-4.7c2.1,0,3.2,1.6,3.2,4.7V53.8z M78.4,58.9c-3.2,0-5.9-1.1-7.9-3.3c-2-2.2-3-4.9-3-8.1s1-6,3-8.1 c2-2.2,4.7-3.3,7.9-3.3c3.3,0,5.9,1.1,7.9,3.3c1.9,2.1,2.9,4.9,2.9,8.1s-1,6-2.9,8.1C84.2,57.8,81.6,58.9,78.4,58.9z' fill-rule='evenodd'%3E%3C/path%3E%3Cpath fill='%23fff' d='M44.4,42.2c-1.3,0-2.4,0.5-3.1,1.6c-0.7,1-1,2.1-1,3.5c0,1.4,0.3,2.6,1,3.6c0.8,1.1,1.8,1.7,3.2,1.7 c1.3,0,2.4-0.6,3.1-1.7c0.6-1,1-2.2,1-3.6c0-1.4-0.3-2.5-1-3.5C46.7,42.8,45.7,42.2,44.4,42.2z' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
background-size: 55%
}
.contact-icon:before {
background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M22.407%200h-21.1C.586%200%200%20.586%200%201.306v21.1c0%20.72.586%201.306%201.306%201.306h21.1c.72%200%201.306-.586%201.306-1.305V1.297C23.702.587%2023.117%200%2022.407%200zm-9.094%2018.046c0%20.41-.338.737-.738.737H3.9c-.41%200-.738-.337-.738-.737v-1.634c0-.408.337-.737.737-.737h8.675c.41%200%20.738.337.738.737v1.634zm7.246-5.79c0%20.408-.338.737-.738.737H3.89c-.41%200-.737-.338-.737-.737v-1.634c0-.41.337-.737.737-.737h15.923c.41%200%20.738.337.738.737v1.634h.01zm0-5.8c0%20.41-.338.738-.738.738H3.89c-.41%200-.737-.338-.737-.738V4.822c0-.408.337-.737.737-.737h15.923c.41%200%20.738.338.738.737v1.634h.01z%22/%3E%3C/svg%3E);
background-color: #00aeef;
background-size: 43%
}
.contact-module {
position: fixed;
top: 50%;
left: -450px;
transform: translate(-0%, -50%);
max-width: 480px;
z-index: 20;
transition: left .7s
}
.contact-module:hover {
left: 0
}
.contact-module-content {
background: #fff;
padding: 20px;
border-radius: 0 4px 4px 0;
box-shadow: rgba(0, 0, 0, 0.3) 0 0 6px, rgba(0, 0, 0, 0.15) 0 1px 6px
}
.contact-module-content>div>div:nth-of-type(1) {
margin-bottom: 20px
}
.contact-module-content>div>div:nth-of-type(2) {
background: #dadce0;
opacity: .7;
padding: 10px;
border-radius: 4px
}
.contact-module-content>div>div:nth-of-type(2)>div:nth-of-type(2) {
width: 2px;
background: #00aeef;
margin: 0 10px
}
.contact-text-wrapper h3 {
line-height: 1.5;
opacity: .8;
text-transform: uppercase;
cursor: default
}
.contact-module-content a {
color: #212529
}
.contact-module-title {
background: #00aeef;
border: 1px solid #00aeef;
border-radius: 0 4px 4px 0;
color: #fff;
width: 30px;
height: 100px
}
.contact-module-title>div {
transform: rotate(-90deg);
white-space: nowrap;
letter-spacing: 3px;
font-size: 90%;
font-weight: 500
}
.contact-module-content .has-icon {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden
}
.contact-set a>div:nth-of-type(2) {
line-height: 1.4
}
.contact-set h4 {
margin-bottom: 5px
}
.contact-text-wrapper>div:nth-of-type(3) {
line-height: 1.6
}
.contact-text-wrapper>div:nth-of-type(3) a {
font-size: 1.2rem;
font-weight: 500
}
.contact-text-wrapper>div:nth-of-type(3) a+span {
font-size: 1.4rem;
opacity: .7
}
.is-divider {
display: block;
margin: .7em 0 .5em;
background: rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 50px;
height: 2px
}
@media(min-width:1025px) {
.contact-module-title {
cursor: pointer
}
}
@media(max-width:480px) {
.contact-module {
display: none !important
}
}
/* ]]> */
</style>
<div class="contact-module flex">
<div class="flex-align">
<div class="contact-module-content flex">
<div>
<div class="contact-title">
<div class="contact-text-wrapper">
<div>
<h3 class="text-center">Hãy liên hệ ngay với chúng tôi để được tư vấn miễn phí</h3>
</div>
<div class="flex-center">
<div class="is-divider"></div>
</div>
<div class="text-center">
<div><a href="tel:0283122456" rel="nofollow">0283 122 456</a><span> | </span><a href="tel:0900234567" rel="nofollow">0900 234 567</a></div>
<div><span>Email: example@gmail.com</span></div>
</div>
</div>
</div>
<div class="contact-set flex text-center">
<div class="w-50">
<a href="http://zalo.me/0900234567" rel="noopener nofollow" target="_blank" title="Chat Zalo">
<div class="flex-center"><span class="flex has-icon zalo-icon"></span></div>
<div>
<h4>Chat Zalo</h4>
<p>Chat trực tuyến với nhân viên Việt Designer</p>
</div>
</a>
</div>
<div></div>
<div class="w-50">
<a href="/p/lien-he.html" title="Liên hệ">
<div class="flex-center"><span class="has-icon contact-icon"></span></div>
<div>
<h4>Gửi yêu cầu</h4>
<p>Việt Designer sẽ phản hồi ngay khi nhận được yêu cầu</p>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="contact-module-title flex-center">
<div>Liên hệ</div>
</div>
</div>
</div>
Bạn nhớ chỉnh sửa lại thông tin liên hệ nhé, code chỉ đơn giản có vậy và nhớ chèn nó trong tiện ích HTML/JavaScript trong mục Bố cục tiện ích. À mà các bạn lưu ý code này sẽ bị ẩn trên màn hình kích thước từ 480px trở xuống.
