trên các web mấy bác thường cố định 1 box chát ở cuối màn hình , Hôm nay tớ sẽ share Code nút chát click hỗ trợ cố định website này
Code nút chát click hỗ trợ cố định website
Bước 1 : code HTML và js nút chát click hỗ trợ cố định web nhé
Bạn add đoạn code html bên dưới nhé !
|
1 2 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:[email protected]"><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 đó mình có 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.
Bước 2 : code css cho đẹp
|
1 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
Pingback: Code nút chát click hỗ trợ cố định website - FLATSOME - FREE EVERY THING