Bài 9: Tạo sidenav – side menu bằng jquery

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.

Video – Tạo sidenav – side menu bằng jquery

Ý tưởng

"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo"

Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

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

"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo"

Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

<nav class="navbar navbar-expand-lg navbar-light sticky-top top-nav">
   <span class="btn-open">&#9776;</span>
</nav>

+ Phần side menu

<div class="sidenav">
   <span class="btn-close">&times;</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.

Liên hệ