Chỉ HTML đàn accordion
|
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 Show
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ờiHã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úyXem 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ềuXem 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ượtXem 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à CSSXem 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ảnXem 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ượtXem 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 accordionXem 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ượngXem 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 accordionXem 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ả
11. Thu phóng menu đàn accordion hoạt hìnhXem 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ặpXem 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
13. Accordion CSS thuần túy đơn giảnXem 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 dungXem 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ếpXem 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ượngXem 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ớnXem 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 ngangXem 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?
Ở đâ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íchXem 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 AccordionXem 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 Làm cách nào để tạo đàn accordion chỉ với HTML và CSS?Sử dụng phần tử chi tiết HTML
. Sử dụng thẻ
Làm cách nào để tạo đàn accordion trong HTML mà không cần JavaScript?Để tạo đàn accordion trong HTML, người dùng có thể sử dụng phần tử chi tiết HTML5 . Chúng ta có thể tạo một chiếc đàn accordion tốt bằng cách sử dụng yếu tố chi tiết và CSS tối thiểu. Trong đoạn mã trên, chúng tôi đã sử dụng phần tử chi tiết HTML, trong đó thẻ tóm tắt được sử dụng để hiển thị tiêu đề và thẻ chi tiết để hiển thị nội dung của Accordion.
Đàn accordion trong HTML là gì?Accordion. Đàn accordion được dùng để hiển thị (và ẩn) nội dung HTML . Sử dụng lớp w3-hide để ẩn nội dung đàn accordion.
Làm cách nào để tạo trang Câu hỏi thường gặp trong HTML và CSS?Trước khi chúng tôi bắt đầu, bạn sẽ phải tạo các tệp sau. Tệp HTML, tệp CSS và tệp JavaScript cuối cùng . Đoạn bên dưới mô tả các bước cần thực hiện để xây dựng trang Câu hỏi thường gặp này. Mã HTML. trong phần này, các thành phần của trang Câu hỏi thường gặp được tạo và tải. Tiếp theo, chúng tôi tạo và liên kết phong cách. |
