Bạn có thể đã bắt gặp một chiếc đàn accordion trên một trang web rồi. Chúng tồn tại dưới nhiều hình thức, nhưng công dụng của chúng vẫn giữ nguyên
Bạn có thể tạo một đàn accordion CSS và tận dụng các lợi ích, trong bài viết này, chúng ta sẽ khám phá điều đó
Accordions là một cách tuyệt vời để hiển thị thông tin trong một phần nhất định với tiêu đề và tiết kiệm không gian. Thông thường, những chiếc đàn này sẽ sụp đổ theo một cách nào đó, vì vậy một chiếc đàn khác có thể được mở ra
Trước tiên hãy hiểu đàn accordion là gì và sau đó chuyển sang một số menu đàn accordion CSS thực sự
CSS Accordion là gì?
CSS Accordion là một yếu tố thiết kế web cho phép bạn chuyển đổi thông tin khi nhấp vào. Thường thấy trong các trang Câu hỏi thường gặp, đàn accordion có xu hướng có tiêu đề và biểu tượng và sử dụng chuyển đổi để hiển thị nội dung của nó khi được nhấp vào
Lợi ích chính của đàn accordion từ quan điểm trải nghiệm người dùng là nó cung cấp một cách dễ dàng để tiết kiệm dung lượng và tránh các liên kết không cần thiết đến các trang khác. Nó cho phép bạn trình bày thông tin chính [tiêu đề] và chỉ hiển thị nội dung mà người dùng yêu cầu khi nhấp vào chúng
Một chiếc đàn accordion có thể được tạo bằng CSS thuần túy và mang lại kết quả tuyệt vời. Tuy nhiên, không có gì lạ khi thấy các đàn accordion nâng cao hơn cũng sử dụng JavaScript. Đặc biệt nếu họ cần chia sẻ trạng thái của đàn accordion với ứng dụng web theo một cách nào đó
18 ví dụ CSS về đàn accordion tuyệt vời
Hãy xem một số ví dụ và xem một chiếc đàn accordion CSS thực sự trông như thế nào, như tôi đã nói trước khi chúng có các hình dạng và kích cỡ khác nhau, một số là CSS thuần túy và một số yêu cầu một chút JavaScript
1. CSS đa menu thuần túy
Xem Bút trên CodePen
Xem trước
Chúng tôi có hai menu CSS accordion hiển thị các tính năng khác nhau
Thường thì một số menu đàn accordion chỉ cho phép mở một mục tại một thời điểm nhưng ví dụ này cho phép mục này hoặc mục khác, hãy tự mình dùng thử
Chỉ yêu cầu sử dụng CSS, cái này khá cao cấp vì không cần bất kỳ JavaScript nào vì nó thậm chí còn có nút đóng tất cả. Nó thực hiện điều này bằng cách sử dụng các hộp kiểm HTML, một thứ rất thông minh
2. Ví dụ đàn accordion ba chiều
Xem Bút trên CodePen
Xem trước
Đây là một trong những ví dụ về đàn accordion đẹp nhất mà chúng tôi đã tìm thấy và nó chỉ được tạo bằng CSS thuần túy
Ban đầu được tạo ra bởi Ahmad Emran, đàn accordion này cho thấy một thiết kế phức tạp hơn, chú ý đến các chi tiết và tạo ra giao diện ba chiều
3. Menu đàn accordion có tiêu đề
Xem Bút trên CodePen
Xem trước
Menu CSS accordion này thoát ra khi bạn mở một phần
Khi bạn mở một mục, mục kia sẽ đóng lại, nghĩa là mỗi lần chỉ có thể mở một mục
Tiêu đề là một tính năng tuyệt vời vì nó cho phép bạn sử dụng nhiều tiêu đề trên một trang và đặt tiêu đề cho chúng
4. Menu CSS Accordion trượt
Xem Bút trên CodePen
Xem trước
Một menu đàn accordion CSS đơn giản sử dụng chuyển đổi nhanh để chuyển đổi các menu con
Mỗi lần chỉ có thể mở một mục và nó sẽ tự động đóng bất kỳ mục nào khác nếu chúng đang mở
Nhấp lại vào mục đó cũng sẽ đóng một mục đang hoạt động nếu mục đó đang mở
5. Hợp âm HTML và CSS
Xem Bút trên CodePen
Xem trước
Đây là một chiếc đàn accordion đơn giản nhưng đẹp mắt sử dụng hình ảnh động tinh tế cho văn bản khi vật phẩm được kích hoạt
Đó là một ví dụ tuyệt vời về đàn accordion mà bạn có thể sử dụng cho phần Câu hỏi thường gặp trên trang của mình
Nó cho phép nhiều mục được mở, sử dụng hoạt hình trang chiếu và bao gồm các biểu tượng mũi tên trên mỗi mục cũng hoạt hình khi mục đó được mở hoặc đóng
6. Menu đàn accordion theo chủ đề phẳng đơn giản
Xem Bút trên CodePen
Xem trước
Cái này sử dụng JavaScript để phát huy tác dụng của nó
Với ví dụ CSS về đàn accordion này, chúng ta có giao diện người dùng thiết kế hiện đại và sạch sẽ, có hình ảnh động mượt mà
Nó cũng có một hình ảnh động nâng cao hơn giữa mỗi mục khi chúng được mở và đóng
7. Menu đàn accordion trượt
Xem Bút trên CodePen
Xem trước
Một menu accordion CSS đơn giản nhưng hiệu quả
Hoạt hình mà nó sử dụng để trượt giữa các mục mượt mà và chỉ có thể mở một mục cùng một lúc
Bạn có thể dễ dàng thay đổi thiết kế này với các màu sắc và bóng khác nhau
8. Hình ảnh ngang đàn accordion
Xem Bút trên CodePen
Xem trước
Không phải mọi menu CSS accordion đều phải chứa văn bản hoặc thông tin
Ví dụ tuyệt vời này cho chúng ta thấy đàn accordion có thể được sử dụng như thế nào để thể hiện một cách sáng tạo những hình ảnh có thể chứa nhiều yếu tố hơn
Ví dụ này cũng sử dụng các bộ lọc CSS, bộ lọc này được áp dụng cho hình ảnh
9. CSS Accordion với các biểu tượng
Xem Bút trên CodePen
Xem trước
Một ví dụ về CSS Accordion hiện đại và tối thiểu có các biểu tượng
Phần thân của đàn accordion được đệm ở mỗi bên, tạo nên vẻ ngoài hấp dẫn
Chỉ được xây dựng bằng HTML và CSS, không có JavaScript. Cũng có một hình ảnh động mượt mà giữa các mục
10. Thanh trượt hình ảnh đàn accordion
Xem Bút trên CodePen
Xem trước
Một ví dụ đáng yêu khác về thanh trượt hình ảnh đàn accordion nằm ngang
Cái này hiển thị đồng đều từng ảnh, nhưng khi bạn di chuột qua chúng, chúng sẽ hiển thị phiên bản lớn hơn của hình ảnh
Mỗi hình ảnh có một tiêu đề và có thể nhấp vào, thậm chí còn có một mô tả
Thanh trượt hình ảnh rất tuyệt và chúng có nhiều cách sử dụng khác nhau. Chúng tôi đã viết một bài báo về các hiệu ứng thanh trượt hoạt hình thú vị mà bạn có thể quan tâm
11. Thu phóng menu đàn accordion hoạt hình
Xem Bút trên CodePen
Xem trước
Một ví dụ đáng yêu về menu đàn accordion CSS đơn giản
Nó sử dụng hoạt ảnh phóng to và thu nhỏ cho từng mục
Mỗi mục cũng có thể được mở hoặc đóng độc lập
12. Menu đàn accordion dựa trên câu hỏi thường gặp
Xem Bút trên CodePen
Xem trước
Menu CSS accordion được sử dụng rộng rãi cho các trang Câu hỏi thường gặp, chúng là một cách dễ dàng để hiển thị nhiều thông tin mà không làm cho địa điểm trông lộn xộn
Mỗi mục có thể được mở hoặc đóng một cách thuận tiện một cách độc lập
Ví dụ đàn accordion này được thực hiện bằng CSS thuần túy, không cần JavaScript. Bạn có thể dễ dàng điều chỉnh kiểu dáng và màu sắc cho thương hiệu của mình
Bạn có biết bạn cũng có thể tạo cảnh báo chỉ CSS không?
13. Accordion CSS thuần túy đơn giản
Xem Bút trên CodePen
Xem trước
Một ví dụ mới về menu đàn accordion CSS đơn giản
Chỉ có thể mở một mục cùng một lúc, có một biểu tượng dấu cộng đẹp mắt ở bên phải, biểu tượng này có thể được thay đổi cho mục khác phù hợp hơn
CSS thuần túy, không cần JavaScript cho cái này
14. CSS thuần túy phù hợp với nội dung
Xem Bút trên CodePen
Xem trước
Menu mẫu CSS Accordion nâng cao hơn cung cấp một số tính năng tuyệt vời
Điểm bán hàng chính của cái này là nó là CSS thuần túy nhưng cho phép bạn có nhiều đàn accordion bên trong cái chính, hãy thử mở rộng văn bản trong mỗi mục chính
Không cần JavaScript để làm cho tất cả điều này hoạt động
15. Menu đàn accordion có chuyển tiếp
Xem Bút trên CodePen
Xem trước
Một menu accordion CSS thuần túy có một số tính năng thú vị
Khi bạn mở hoặc đóng một mục, mỗi mục sẽ chuyển sang vị trí đóng hoặc mở của nó
Ví dụ về Accordion CSS này được trình bày độc đáo với các con số và hoạt động tốt như một Câu hỏi thường gặp như bạn có thể thấy
16. Menu đàn accordion nhiều màu với các biểu tượng
Xem Bút trên CodePen
Xem trước
Một ví dụ về Accordion CSS ưa thích trong đó mỗi mục có thể được mở hoặc đóng một cách độc lập
Đi kèm với các biểu tượng ở bên phải, có thể dễ dàng thay đổi để phù hợp hơn
Nó có các mũi tên mở và đóng để cho biết mục nào đang mở. Và một hình ảnh động trượt trơn tru
17. Menu đàn accordion chỉ dành cho CSS lớn
Xem Bút trên CodePen
Xem trước
Menu đàn accordion CSS hoạt hình mượt mà có hiệu ứng di chuột trên tiêu đề của từng mục
Mỗi mục có thể được đặt ở một độ cao cố định và cuộn có thể được kích hoạt khi nội dung tràn ra ngoài
Nhìn chung, một ví dụ tuyệt vời và được xây dựng bằng CSS thuần túy
18. Menu đàn accordion trượt ngang
Xem Bút trên CodePen
Xem trước
Chúng tôi đã thấy các menu đàn accordion CSS ngang có hình ảnh nhưng còn văn bản thì sao?
bài viết liên quan. Ví dụ về chân trang web đẹp
Ở đây chúng tôi có một ví dụ đơn giản đáng yêu, trượt sang trái và phải để mở hoặc đóng các mục đàn accordion
Tốt cho nhiều văn bản và để giữ thông tin ở vị trí nằm ngang trên trang web
19. Menu đàn accordion dựa trên câu hỏi thường gặp ưa thích
Xem Bút trên CodePen
Xem trước
Chúng tôi biết rằng menu đàn accordion rất phù hợp cho các trang Câu hỏi thường gặp
Ví dụ này rất ấn tượng và cho thấy cách sử dụng menu đàn accordion trong một phần cụ thể trên trang web, điều này không nhất thiết phải ở trên một trang mà nó có thể nằm trên trang đích
Bản thân menu đàn accordion có một số hiệu ứng di chuột tinh tế đẹp mắt và chúng mở nhanh mà không cần bất kỳ hoạt ảnh nào
20. Hình ảnh trượt CSS Accordion
Xem Bút trên CodePen
Xem trước
Một cách khác để hiển thị hình ảnh có thể chứa nhiều thông tin hơn, bạn sẽ phải tự thêm hình ảnh đó
Tuy nhiên, thiết kế ở đây rất thú vị và hình ảnh động giữa mỗi mục mượt mà và hấp dẫn
CSS thuần túy, cũng không có JavaScript
Tại sao Menu Accordion lại hữu ích?
Menu đàn accordion rất hữu ích vì chúng giúp giữ cho thiết kế sạch sẽ và hiện đại. Chúng giúp giải mã không gian trên trang web bằng cách ẩn văn bản hoặc thông tin
Một cái gì đó giống như trang Câu hỏi thường gặp, không phải mọi người dùng đều muốn xem tất cả văn bản trong một lần, họ có thể chỉ cần xem các câu hỏi cụ thể và họ có thể chọn và chọn câu hỏi nào sẽ mở, đó là lý do tại sao menu đàn accordion là hoàn hảo
Nhìn chung, chúng giúp cải thiện trải nghiệm người dùng và thuận tiện trong việc hiển thị nhiều thông tin cùng lúc