Accordion menu là một dạng menu phổ biến được sử dụng nhiều trong các website hiện đại. Accordion không chỉ được sử dụng cho Menu, nó cũng có thể được sử dụng cho nội dung, hình ảnh. Ở bài này tôi sẽ hướng dẫn cách tạo một menu dọc, trong đó áp dụng accordion vào.

Về cơ bản hiệu ứng Accordion này hoạt động theo nguyên lý khi người dùng mới mở trang web, Khi người dùng click chuột vào icon, nội dung của thành phần con nó sẽ được hiển thị và các phần khác bị ẩn. Khi đóng thành phần cha, thì tất cả các thành phần con cũng đóng theo.

Để hiểu và làm được theo hướng dẫn dưới đây, các bạn cần có một số kiến thức:

– HTML – CSS: cơ bản.

– jQuery: Nắm rõ các sử dụng animation, và thao tác trên DOM.

Để tránh bài quá dài, tôi sẽ chia bài viết làm 2 phần:

Phần 1: Tạo menu và định dạng cho menu Accordion với HTML – CSS.

Phần 2: Xử lý sự kiện cho Accordion Menu với jQuery.


Phần 2: Xử lý sự kiện cho Accordion Menu với jQuery.

phần 1 trước chúng ta đã dựng giao diện cho Menu với HTML và CSS, nhưng nó vẫn chưa hoạt động được, vì thế ở bài này, chúng ta sẽ xử lý xự kiện cho menu với jQuery.

Nguyên lý của menu chúng ta sẽ xử lý như sau:

– Khi click vào menu, chúng ta sẽ kiểm tra xem nó có phần tử con hay không, nếu không có thì mở liên kết của menu với thuộc tính href của nó.

– Nếu có phần tử con, chúng ta check xem nó đang ẩn hay hiện (với thuộc tính css: display: none /block). Nếu đang ẩn (display = none) thì chúng ta sẽ dùng slideDown() của jQuery để hiện các phần tử con, đồng thời tìm các phần tử khác cùng cấp, và hide các phần tử con của nó lại.

– Nếu check nó đang hiện phần tử con, thì slideUp để ẩn nó đi. Đồng thời tìm các phần tử con và đóng các phần tử con của nó.

– Sau đây chúng ta sẽ bắt tay vào code 😀

Để sử dụng được jQuery, đầu tiên chúng ta cần khai báo thư viện của jQuery vào mã nguồn. Có nhiều cách để chèn thư viện jQuery các bạn có thể xem tại đây, ở đây tôi sẽ sử dụng jQuery with a CDN

Tiếp tục sửa code của phần 1, chúng ta sửa lại, thêm vào trước thẻ </head> như sau:

Tiếp theo chúng ta sẽ thêm mã js vào mã nguồn của chúng ta, để dễ quản lý, tôi sẽ tạo một file mới tên là script.js và đính vào file html của chúng ta. Khi đó các bạn sửa lại file html và thêm vào trước thẻ head code sau:

Trong đoạn code trên, js/script.js là nơi chứa file script.js

Đến đây chúng ta đã khai báo thư viện cần thiết xong, bây giờ tiến hành viết code chính cho chức năng trong file script.js.

Đầu tiên chúng ta cần cho trình duyệt load các phần tử ra trước khi xử lý các sự kiện, chúng ta cho vào file script đoạn code sau. Các code về sau chúng ta sẽ viết trong đoạn này

– Chúng ta sẽ xử lý sự kiện khi click vào thẻ li đầu tiên, sau đó kiểm tra xem nó có phần tử con hay không, nếu không thì mở link trong href attribute. Nếu không chúng ta xét xem các phần tử con đang ẩn hay hiện. Nếu đang ẩn thì chúng ta slideDown() để hiện lên, và ngược lại chúng ta dùng slideUp() để ẩn đi. Code của chúng ta như sau:

  • children(“ul”).find(“li”) – Đoạn này lấy phần tử con là thẻ ul, sau đó tìm xuống thẻ li
  • on(“click”) – là để bind sự kiện click, khi chúng ta click vào phần tử của thẻ li, thì gọi sự kiện và các hoạt động trong function(){} được thực thi.
  • e.preventDefault(); – Đoạn này để tránh trường hợp lick vào nó gọi acction chuyến đến link trong href.
  • $subMenus.css(“display”) – Đoạn này để lấy display xem đang hiện (block) hay ẩn (none).
  • $(this).siblings() – Để chọn các phần tử cùng cấp với chính nó.
  • $(this).children(“a”).attr(“href”) – để lấy liên kết trong attribute href.

Đến đây, menu của chúng ta cơ bản đã hoàn thành, các bạn có thể viết thêm hiệu ứng cho nó được hoàn thiện hơn.

Code của bài viết được cập nhật và đang nâng cấp tại Github, các bạn có thể tải về bản mới nhất. Trên đây, file script được viết thành dạng Plugin, chỉ cần các bạn chèn vào web của mình, và gọi $(“#id chứa menu”).accordion(); là plugin sẽ hoạt động. Chú ý phải chèn CSS của plugin vào để hiển thị giống như demo.

Chúc bạn thành công.

Tạo Menu Accordion đẹp với HTML CSS và jQuery (Phần 2)
3.67 (73.33%) 3 votes

3 BÌNH LUẬN

    • Chào bạn,
      Bạn phải xem đầy đủ 2 phần mới có thể làm giống như vậy.
      Trong cuối bài viết, mình có link mã nguồn, bạn có thể vào xem coi có thiếu sót gì không nhé, ngoài ra demo online mình có thêm một số hiệu ứng mới mà chưa cập nhật trong bài viết. Bạn xem trong link nhé.

BÌNH LUẬN

Nhập mã kiểm tra * Time limit is exhausted. Please reload the CAPTCHA.