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ệ

Bài viết liên quan

Bài 1: Giới thiệu jQuery và hướng dẫn cài đặt phần mềm Bài 10: Hiệu ứng slide – phần html và css Bài 11: Hiệu ứng slide – Xử lý nút next và prev bằng jquery Bài 22: Tạo hiệu ứng chuyển động với thư viện TweenMax