Lấy ý tưởng từ tính năng Assistive Touch trên iPhone, mình sẽ tạo ra 1 "nút menu" chứa các chức năng cần thiết để tăng độ tương tác của khách truy cập trên website.


Tạo nút "AssistiveTouch" cho website
Tạo nút "AssistiveTouch" cho website

Tùy vào mục đích tương tác mà quản trị viên sẽ đưa ra các chức năng phù hợp. Với 123itvn.com tại thời điểm này, mình chỉ đang sử dụng 3 chức năng sau.
Back to top.
- Tìm kiếm nhanh ⇒ tăng view.
- Liên hệ với fanpage facebook ⇒ tăng like.


                                                               Nguồn 123itvn

Ở bài viết này, mình chỉ chia sẻ đoạn code để tạo được nút "Assistive Touch". Còn đi sâu hơn vào phần thiết kế chức năng, cái này xin nhường lại cho anh em thỏa sức sáng tạo :))
Code sẽ bao gồm 3 phần HTML, CSS và Javascript (Jquery) - phiên bản 1.0 (10/01/2018).

Bước 1 : Tìm đến trước thẻ đóng </body>
Bước 2 : Copy - paste đoạn mã sau vào. Lưu lại.

Mã HTML


<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'>
<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' />
</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>

Mã CSS 


.touch {width:135px; height:135px; position:fixed; bottom:50px; right:10px;}
.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;}

Mã javascript / jquery


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/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");
});
</script>
- - 0 bình luận CHUYÊN MỤC

BÌNH LUẬN (0)

:)
:))
:D
=))
:(
:((
:o
^_^
^-^
/-f
^.^
/-g
;)
-_-
=_=
/-r
-.-
:p
/-o
/-hi
/-ok
/-clap
(y)
(3)

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé