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

0

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ệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.