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.

See the Pen Accordion Menu by Thai Thanh Nhan (@thanhnhan2tn) on CodePen.

Để 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 1: Tạo menu và định dạng cho menu với HTML và CSS

– Dựng sườn cho menu bằng HTML

Ở đây chúng ta sẽ sử dụng HTML để dựng các list, nó chính là menu của chúng ta cần code HTML như sau:

– Với đoạn mã trên, chúng ta đã tạo được các danh sách, và trong số đó có chứa danh sách con,

 

– Các thẻ <i > chứa các class “fa fa-**” là sử dụng bộ icon của font-awesome nên bạn phải thêm thư viện của font-awesome vào trước thẻ </head >, chúng ta sửa lại code trên như sau:

– sau khi chạy code sẽ hiển thị như sau:

html-accordion-menu-before-css

 

– Layout giao diện cho menu với CSS

Để menu được đẹp, và ẩn đi các thành phần thuộc cấp con,.. chúng ta cần thêm CSS cho menu:

– Để thêm css, các bạn có thể sử dụng nhiều cách, ở đây tôi sẽ cho trực tiếp vào file html, để làm việc này, các bạn thêm thẻ sau vào trong trước thẻ </head>

– Trước tiên chúng ta layout từ bố cục bên ngoài, đóng khung và font mặc định cho menu, các bạn chèn code sau vào trong cặp thẻ vừa thêm như sau:

– Tiếp theo chúng ta sẽ layout cho header, footer của menu

– Menu của chúng ta lúc này như sau:

html-accordion-css-header

– Tiếp đến chúng ta layout cho các thẻ ul, li trong menu, cho đồng bộ với các thành phần khác, ngoài ra các thẻ con chúng ta sẽ ẩn đi với thuộc tính “display: none;”, các bạn thêm code sau vào:

– Khi thêm CSS trên, thì menu của chúng ta hiện tại như sau:

html-accordion-css-li

– Ở đây chúng ta nhận thấy một số vấn đề cần chỉnh lại như sau:

+ icon dính vào chữ trên menu

+ Thêm đường viền cách giữa các item.

+ Thêm hiệu ứng khi rê chuột vào, và hiệu ứng khi menu item được kích hoạt.

Bây giờ chúng ta thêm một vài dòng CSS như sau:

– Đây là thành quả:

html-accordion-css-style

– Sau đây à code toàn bộ các phần trên:

Đây mới chỉ là style cho menu, phần sau chúng ta sẽ viết jQuery xử lý sự kiện để ẩn hiện các thành phần con của menu.

Tạo Menu Accordion đẹp với HTML CSS và jQuery (Phần 1)
5 (100%) 5 votes

0 BÌNH LUẬN

BÌNH LUẬN

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