JSFiddle - React, Tailwind, and code Playground

by Nam CuPeo

HTML

<p>
<b>NÚT ASSISTIVE TOUCH TRÊN WEBSITE - 123itvn.com</b>
<br/><br/>
Link bài viết : <a href='https://www.123itvn.com/2018/01/tao-nut-assistivetouch-cho-website.html' target='_blank'>Click here</a>
<br/>
Ra đời được coi là "sinh sau để muộn" vào ngày 03/03/2014 nhưng 123itvn.com hứa hẹn sẽ mang tới một sân chơi lành mạnh và cực kỳ hữu ích cho tín đồ công nghệ ở Việt Nam.
Bạn thích kiếm tiền online ? Bạn đam mê với các thủ thuật IT máy tính ? ... Hãy để chúng tôi chia sẻ với bạn !!!!
<br/><br/>
Từ khi thành lập cho đến nay, đội ngũ 123itvn luôn không ngừng cập nhật, hoàn thiện và mở rộng thêm nội dung mới để người đọc có được những thông tin thực sự có giá trị. Đơn giản nhưng phải hiệu quả !
Mọi đề xuất hợp tác hoặc góp ý, xin vui lòng gửi với chúng tôi thông qua biểu mẫu liên hệ.
Cám ơn và đã ghé thăm và chúc bạn một ngày tốt lành.
</p>
<div class='touch'>
<div class='menu-chinh'>
<img height='25px' width='25px' src='https://4.bp.blogspot.com/-BYUF7UMKLHY/WlWUudG4hsI/AAAAAAAANv4/zbyqGpPizqsi8yS6NuAgMwjpqunUunF1wCLcBGAs/s1600/ghim-giay-512-512.png' />
</div>
<div class='menu-1'>
<img height='16px' width='16px' src='https://1.bp.blogspot.com/-k6sikOdzFXQ/VwqCKDosmEI/AAAAAAAAKxE/nLxLhkTIO6o3iE5ZWmtxo2bf4QHdzPQNQ/s1600/top.png' />
</div>
<div class='menu-2'>
<a href='https://www.123itvn.com/2018/01/tao-nut-assistivetouch-cho-website.html' target='_blank'>
<img height='20px' width='20px' src='https://1.bp.blogspot.com/-3dlIirg_lPw/WlWMsI-zhpI/AAAAAAAANuk/6FbCxrWtzq0T2NqC9Mg-qx-svJ9scnc5ACLcBGAs/s1600/tim-kiem-trang-512-512.png' />
</a>
</div>
<div class='menu-3'>
<img width='25px' height='26px' src='https://1.bp.blogspot.com/-E9_cEAdmlrM/WlWJl5UNdNI/AAAAAAAANuY/q1N4zwDkgWU3pU2pbv3KYkMEipFYYzibwCLcBGAs/s1600/fb-mess-trang.png' />
</div>
</div>

CSS

.touch {width:135px; height:135px; position:fixed; bottom:50px; right:10px; z-index:1000;}
.touch div {width:min-content; border:2px solid #fff; border-radius:45px; box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.3); position: absolute; cursor: pointer; z-index: 1000;}
.menu-chinh { background:crimson;  padding:8px 8px 5px;   left:90px; top:90px; }
.menu-1 {display:none; background:#06ace6; padding:10.5px 12.5px; left:90px; top:0px;}
.menu-2 {display:none; background:#525457; padding:10px 10.5px 7px; left:35px; top:35px;}
.menu-3 {display:none; background:darkorchid; padding: 7.5px 8px 3.5px; left:0px; top:90px;}

JavaScript

$(".menu-chinh").click(function() {
 //Khi click vào Assistive touch, nếu các menu con đang ẩn thì hiện lên
 if($(".menu-1").css('display')=='none') $(".menu-1,.menu-2,.menu-3").show(200,'swing');
 // đang hiện thì ẩn đi
 else $(".menu-1,.menu-2,.menu-3").fadeOut('fast');
 });
 //click vào 1 trong các menu con thì tất cả cùng ẩn đi
 // thiết kế chức năng do quản trị viên code, có thể tham khảo trên 123itvn.com
  $(".menu-1,.menu-2,.menu-3").click(function() {
 $(".menu-1,.menu-2,.menu-3").fadeOut('fast');
 });
 // code cho nút lên đầu trang - backtotop
$(".menu-1").click(function () {
$("body,html").animate({scrollTop: 0}, "slow");
});