trên những web mấy bác bỏ thường khăng khăng 1 box chát ở cuối màn hình , hôm nay tớ sẽ share Code nút chát click tương trợ khăng khăng website này
Code nút chát click hỗ trợ một mực website
Code nút chát click hỗ trợ khăng khăng website
Bước 1 : code HTML và js nút chát click tương trợ khăng khăng web nhé
Bạn add đoạn code html bên dưới nhé !
<br /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><br /> <div class="btn-social"><br /> <ul class="ft-menu-cl"><br /> <li class="menu-click"><i class="fa fa-comments" aria-hidden="true"></i><br /> <ul class="sub-menu-cl"><br /> <li><a href="tel:01234567"><i class="fa fa-phone" aria-hidden="true"></i> Hotline: 01234567</a></li><br /> <li><a href="emailto:hotro@flatsome.xyz"><i class="fa fa-envelope-o" aria-hidden="true"></i> Email: hotro@flatsome.xyz</a></li><br /> </ul><br /> </li><br /> </ul><br /> </div><br /> <script type="text/javascript"><br /> $(function() <br /> $('.menu-click').click(function() <br /> $(this).toggleClass('open');<br /> );<br /> );<br /> </script>
|
1
hai
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-social">
<ul class="ft-menu-cl">
<li class="menu-click"><i class="fa fa-comments" aria-hidden="true"></i>
<ul class="sub-menu-cl">
<li><a href="tel:01234567"><i class="fa fa-phone" aria-hidden="true"></i> Hotline: 01234567</a></li>
<li><a href="emailto:hotro@flatsome.xyz"><i class="fa fa-envelope-o" aria-hidden="true"></i> Email: hotro@flatsome.xyz</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(function()
$('.menu-click').click(function()
$(this).toggleClass('open');
);
);
</script>
|
trong ấy mình mang sài icon font awesome, nếu bạn muốn cài thì đọc bài dưới nhé để có icon, hoặc thay thẻ <i> thành <img> mà bạn thích.
mang THỂ BẠN quan tâm
- [hỏi – đáp] Show thuộc tính sản phẩm ra trang sản phẩm trong wordpress
- cách tiêu dùng hàm điều kiện trong wordpress
- Shortcode WordPress và bí quyết tạo Shortcode WordPress áp dụng Shortcode trong Flatsome
- Theme Flatsome 3.14.1 – Update ngày 14/07
- Host TinoHost giảm giá lên đến 99% trọn đời nhà cung cấp Hosting và VPS
- cách thức Active rank math PRO – Plugin seo top một
Code nút chát click tương trợ nhất định website
Bước 2 : code css cho đẹp
<br /> .btn-social <br /> position:relative;<br /> z-index:1000;<br /> <br /> ul.ft-menu-cl <br /> position: fixed;<br /> background:#e4900b;<br /> bottom: 5px;<br /> color: #fff;<br /> right: 10px;<br /> border-radius: 99px;<br /> width: 60px;<br /> line-height: 60px;<br /> height: 60px;<br /> text-align: center;<br /> list-style:none;<br /> <br /> ul.sub-menu-cl li:last-child <br /> border-bottom: none;<br /> <br /> ul.sub-menu-cl li <br /> border-bottom: 1px solid #ccc;<br /> padding: 8px 10px;<br /> margin-bottom: 0;<br />
|
một
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
.btn-social
position:relative;
z-index:1000;
ul.ft-menu-cl
position: fixed;
background:#e4900b;
bottom: 5px;
color: #fff;
right: 10px;
border-radius: 99px;
width: 60px;
line-height: 60px;
height: 60px;
text-align: center;
list-style:none;
ul.sub-menu-cl li:last-child
border-bottom: none;
ul.sub-menu-cl li
border-bottom: 1px solid #ccc;
padding: 8px 10px;
margin-bottom: 0;
|
Lưu và xem kết quả nhé 🙂
Chúc bạn thành công
0 nhận xét: