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.
Ở 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvEpqEie7w3recV4p9zyVRonH65_NbICpGKu0KZtniAHF04bgMlFNCbKxL-peq5gzFL53Cs4Qk9S4-zHoNLq-l2asjsTHFkjx0Ihbb_5FWpYBRhoI3b9UI9B7Q0WHb_znYZmq3yhLbRGbq/s1600/ghim-giay-512-512.png’ />
</div>
<div class=’menu-1′>
<img height=’16px’ width=’16px’ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmapIT_7wZGVJuQgKQ8lNktQqpB7BRfN72M6jp4Gu6__jC0LyM_uRguz8jcgpOsYht13SisvB79ymDrD9FWRIwtPRBEDBQKGMETtHGtNDctbUFZg3gpEe6QFlHhiPiYXSyK1W8_lzNnjh0/s1600/top.png’ />
</div>
<div class=’menu-2′>
<a href=’#’ target=’_blank’>
<img height=’20px’ width=’20px’ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy53llGLNLsY4Ds7TYdvLKnTrapB1bkR8sry99hZ6lpjachIpVUwTjlFtUIdGvUKSrj-V8_cpqciD1VwsZ-sgirTNIT8O7LY9GUrTwikjpMniz0bwjxFpLyDp0jzSIywI8tszvytz7QOzX/s1600/tim-kiem-trang-512-512.png’ />
</a>
</div>
<div class=’menu-3′>
<a href=’#’ target=’_blank’>
<img width=’25px’ height=’26px’ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcbrW_B_J6V5Ssqi7JDM5DsdjJRTV10j8iepm5FkUpcy8BJca2K0K5I1gVqNhkkx-Ho_l0CHBZlFSiD0XVdzsUH71pPhX31pABjuCBTZU47iFSXcwpdpvchv69a22y6Q_oWMBmE0cX7onn/s1600/fb-mess-trang.png’ />
</a>
</div>
</div>
Mã 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;}
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>
Lời kết
Trong thời gian tới, mình sẽ cập nhật thêm các phiên bản mới với code tối ưu hơn, chức năng tương tác tốt hơn, hi vọng chúng sẽ có ích cho website của anh em, nhớ đón đọc nhé.
