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

Bắt sự kiện click để addClass hoặc removeClass

Hướng dẫn

Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé

Các bạn cần 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 đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì. 

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">&#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ệ