Làm menu sidebar - Final with slidetoggle

24/05/2019

Bài sau » « Bài trước

Ở phần trước chúng ta đã làm menu sidebar với hiệu ứng đơn giản là click vào show menu con theo CSS display: block.

Để xem tiếp bài này thì phải xem xong bài làm menu sidebar, vì ở bài hướng dẫn này phần HTML, CSS sử dụng lại từ bài trước nha các bạn.

Bài hướng dẫn này, Chúng ta làm tính năng nâng cao hơn xíu là áp dụng jquery slideToggle() để show menu con mượt hơn xíu nhé.

Về cấu trúc HTML và code CSS cơ bản là giống bài trước nhé. 

Đầu tiên, Ta xóa dòng css bên dưới đi, vì ta không xài display: block nữa.

.sidebar-left .sidebar-menu li.has-child.menu-open > ul{ display: block; }

Tiếp theo, ta code lại đoạn jquery như sau:

$('.sidebar-left .sidebar-menu li.has-child > a .icon').click(function(e){ e.preventDefault(); //$(this).parent().parent().toggleClass('menu-open'); comment dòng code cũ $(this).parent().toggleClass('menu-open').next('ul').slideToggle(); // Sửa thành code mới });

Ý nghĩa:

- Khi click vào icon mũi tên => lùi ra 1 cấp (thẻ <a>) và add hoặc remove class "menu-open" ngay tại thẻ <a>. Class "menu-open" này chỉ có nhiệm vụ xoay icon mũi tên khi menu mở, đóng thôi.

- Dùng hàm .next('ul') để tìm phần tử <ul> nằm kế tiếp <a> và cho nó chạy hàm .slideToggle().

Hàm .slideToggle() có nhiệm vụ hiển thị phần tử khi nó đang ẩn hoặc ngược lại ẩn phần tử khi nó đang hiển thị theo dạng slideshow - Là hàm tổng hợp của slideUp() và slideDown()

Và kết quả như sau:

Ở phần trên, khi ta click show menu con này, menu con khác không đóng lại. Bây giờ, chúng ta làm luôn tính năng này nhé.

Ta sửa lại đoạn jquery như bên dưới:

$('.sidebar-left .sidebar-menu li.has-child > a .icon').click(function(e){ e.preventDefault(); $(this).parent().parent().siblings().find('a').removeClass('menu-open').next('ul').slideUp(); // Dòng code này có nhiệm vụ đóng tất cả menu khác đồng cấp đang mở. $(this).parent().toggleClass('menu-open').next('ul').slideToggle(); });

Ý nghĩa, Dòng code trên chạy như sau :

- Khi click icon mũi tên => lùi ra 2 cấp qua 2 hàm .parent() khi này nó đang ở li.has-child => dùng .siblings() quét các thẻ <li> đồng cấp khác => Tìm thẻ <a> và remove class "menu-open" để icon mũi tên xoay đóng lại => Tìm thẻ <ul> kế tiếp thẻ <a> và cho slideUp() - đóng lại.

Xem link Demo full 3 loại menu sidebar.

Khi thực hành có chỗ nào không hiểu thì các bạn hãy để lại bình luận nhé. Mình sẽ giải thích thêm. Chúc các bạn thực hành thành công!

Bài sau » « Bài trước

Bình luận

SefGloli 07/12/2019

Generic cialis tadalafil cheap cialis online real cialis pills
Back to top