Trong bài này, mình sẽ hướng dẫn các bạn tạo sidenav – side menu bằng jquery. Nguyên lý chính của hiệu ứng này vẫn là bắt sự kiện và thêm/bỏ class.
Nội dung chính
Video – Tạo sidenav – side menu bằng jquery
Ý tưởng
Bắt sự kiện click để addClass hoặc removeClass
Hướng dẫn
Các bạn có thể tham khảo cách tạo sidenav bằng javasript thuần trên w3school nhé. Ở đây mình sẽ hướng dẫn bằng cách dùng các hàm addClass và removeClass trong thư viện jQuery.
Phần HTML
+ Thanh menu
<nav class="navbar navbar-expand-lg navbar-light sticky-top top-nav"> <span class="btn-open">☰</span> </nav>
+ Phần side menu
<div class="sidenav"> <span class="btn-close">×</span> <div class="sidenav-item"> <a href="">Home</a> <a href="">About</a> <a href="">Contact</a> </div> </div> <div class="main-content"> <p>Nội dung</p> </div>
Phần định dạng CSS
html,body{ background: #f5f5f5; width: 100%; height: 100%; } .top-nav{ font-size: 25px; cursor: pointer; } .btn-open{ font-size: 25px; cursor: pointer; } .sidenav { width: 0px; height: 100%; background: #19192e; padding-top: 30px; color: #fafafa; position: fixed; z-index: 1; overflow-x: hidden; transition: 0.6s; } .sidenav-item { margin-top: 30px; font-size: 15px; } .sidenav-item a { text-decoration: none; padding: 10px 12px; margin-left: 20px; display: block; color: #fafafa; } span.btn-close { position: absolute; top: 0px; right: 20px; font-size: 35px; cursor: pointer; } .main-content { margin-left: 0px; transition: 0.6s; padding: 20px; } .show{ width: 250px; transition: 0.6s cubic-bezier(0, 1.16, 0, 1.23); } .push{ margin-left: 250px; transition: 0.6s cubic-bezier(0, 1.16, 0, 1.23); }
Phần xử lý JS
Chúng ta sẽ bắt sự kiện click và thêm class show cho sidenav và class push cho phần main
$(document).ready(function() { $('.btn-open').click(function(event) { $('.sidenav').addClass('show'); $('.main-content').addClass('push'); }); $('.btn-close').click(function(event) { $('.sidenav').removeClass('show'); $('.main-content').removeClass('push'); }); });
Code mẫu: Download
Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.