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á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ệ