Cách tạo Accordion nội dung dựa trên CSS
Trong hướng dẫn hôm nay, chúng ta sẽ tìm hiểu làm thế nào chúng ta có thể tạo ra một accordion nội dung ngang và dọc chỉ bằng cách sử dụng CSS3. Có rất nhiều plugin jQuery có thể thực hiện công việc này cho bạn nhưng bạn sẽ làm gì nếu khách truy cập đã tắt Javascript, thì accordion sẽ không hoạt động chính xác. Nếu accordion của bạn hoàn toàn bằng CSS thì nó sẽ hoạt động cho tất cả khách truy cập của bạn.
Chúng tôi sẽ tạo ra một ngang và theo chiều dọc nội dung accordion. Khi nhấp vào văn bản tiêu đề, slide sẽ mở ra hiển thị toàn bộ nội dung và đây là bản xem trước nhanh (ảnh chụp màn hình) trông chúng như thế nào.
Giống như những gì bạn nhìn thấy? Hãy để mã hóa bắt đầu!
1. Chuẩn bị HTML và Nội dung
Để bắt đầu, chúng tôi sẽ tạo HTML cho accordion.
Cấu trúc cần một container div và sau đó có một phần cho mỗi slide trong accordion. Trong ví dụ này, chúng ta sẽ có 5 slide. Mỗi slide sẽ có một tiêu đề và một đoạn cho nội dung.
Về chúng tôi
Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, ngồi amet Elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur preferisis rhoncus eros eget placerat. Aliquam semper mauris ngồi amet justo TIME nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim Vulputate sed. Maecenas elit quam, eestas eget placerat non, fringilla vel eros. Nam scriptsicula Elementum nulla sed hậu quả. Phasellus eu erat enim. Ca ngợi tại magna non massa dapibus scelerisque trong eu lorem.
Dịch vụ
Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, ngồi amet Elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur preferisis rhoncus eros eget placerat. Aliquam semper mauris ngồi amet justo TIME nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim Vulputate sed. Maecenas elit quam, eestas eget placerat non, fringilla vel eros. Nam scriptsicula Elementum nulla sed hậu quả. Phasellus eu erat enim. Ca ngợi tại magna non massa dapibus scelerisque trong eu lorem.
Blog
Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, ngồi amet Elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur preferisis rhoncus eros eget placerat. Aliquam semper mauris ngồi amet justo TIME nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim Vulputate sed. Maecenas elit quam, eestas eget placerat non, fringilla vel eros. Nam scriptsicula Elementum nulla sed hậu quả. Phasellus eu erat enim. Ca ngợi tại magna non massa dapibus scelerisque trong eu lorem.
Danh mục đầu tư
Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, ngồi amet Elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur preferisis rhoncus eros eget placerat. Aliquam semper mauris ngồi amet justo TIME nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim Vulputate sed. Maecenas elit quam, eestas eget placerat non, fringilla vel eros. Nam scriptsicula Elementum nulla sed hậu quả. Phasellus eu erat enim. Ca ngợi tại magna non massa dapibus scelerisque trong eu lorem.
Tiếp xúc
Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, ngồi amet Elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur preferisis rhoncus eros eget placerat. Aliquam semper mauris ngồi amet justo TIME nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim Vulputate sed. Maecenas elit quam, eestas eget placerat non, fringilla vel eros. Nam scriptsicula Elementum nulla sed hậu quả. Phasellus eu erat enim. Ca ngợi tại magna non massa dapibus scelerisque trong eu lorem.
Bây giờ chúng ta có các slide của chúng ta, chúng ta có thể bắt đầu tạo kiểu cho accordion.
2. Tạo kiểu CSS
Đầu tiên chúng ta cần tạo kiểu chứa div của đàn accordion. Điều này sẽ cho chúng ta ý tưởng về cách hiển thị từng trang chiếu và từng tiêu đề.
/ * Xác định hộp Accordion * / .accordion width: 830px; tràn: ẩn; lề: tự động 10px; màu: # 474747; nền: # 414141; phần đệm: 10px;
Tiếp theo chúng ta sẽ tạo tiêu đề cho mỗi slide.
.phần accordion float: left; tràn: ẩn; màu: # 333; con trỏ: con trỏ; nền: # 333; lề: 3px; .accordion phần: hover nền: # 444;
Chúng tôi đang đặt màu nền là màu xám đậm trên phần làm tiêu đề nơi khách truy cập sẽ nhấp để hiển thị trang chiếu. Chúng tôi đang sử dụng phần này cho cả tiêu đề và nội dung, điều đó có nghĩa là chúng tôi có thể sử dụng ít HTML hơn và sử dụng lại tiêu đề của slide làm tiêu đề của nội dung.
.phần accordion p display: none;
Hiện tại, tất cả các slide sẽ được đóng lại, vì vậy chúng tôi cần đảm bảo rằng đoạn đó được ẩn khỏi chế độ xem cho đến khi slide được mở, vì vậy bây giờ hãy đặt hiển thị đoạn văn thành không.
.phần accordion: sau vị trí: tương đối; cỡ chữ: 24px; màu: # 000; font-weight: in đậm; .accordion phần: nth-child (1): sau nội dung: '1'; .accordion phần: nth-child (2): after content: '2'; .accordion phần: nth-child (3): sau nội dung: '3'; .accordion phần: nth-child (4): sau nội dung: '4'; .accordion phần: nth-child (5): sau nội dung: '5';
Khi các slide được đóng, chúng tôi muốn hiển thị một số ở dưới cùng của tiêu đề để cho biết chúng tôi đang trượt số nào. Đối với điều này, chúng tôi sẽ sử dụng CSS để thêm nội dung sau tiêu đề của phần, điều này có thể được thực hiện bằng cách sử dụng :sau bộ chọn lớp giả.
Bây giờ chúng tôi đã tạo tiêu đề cho slide, chúng tôi có thể tạo sự kiện nhấp để hiển thị slide trong accordion. Nhưng có một vấn đề, CSS không có sự kiện nhấp chuột, đó là lý do tại sao accordion thường được tạo bằng cách sử dụng jQuery để chúng tôi có thể đính kèm sự kiện nhấp vào văn bản tiêu đề.
Chúng ta cần bắt chước sự kiện nhấp chuột trong CSS có thể được thực hiện bằng cách sử dụng :Mục tiêu bộ chọn lớp giả.
3. Sử dụng :Mục tiêu Bộ chọn lớp giả
:Mục tiêu cho phép chúng ta định kiểu định danh mảnh. Đôi khi chúng tôi sử dụng thẻ neo trên trang để trỏ đến một vị trí trên trang. Khi nhấp vào liên kết ID trong thẻ neo trở thành mục tiêu và bạn có thể tạo kiểu này bằng cách sử dụng :Mục tiêu bộ chọn.
Để thêm điều này vào accordion, chúng ta cần thêm một liên kết xung quanh tiêu đề chỉ đến một ID của slide.
Về chúng tôi
Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, ngồi amet Elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur preferisis rhoncus eros eget placerat. Aliquam semper mauris ngồi amet justo TIME nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim Vulputate sed. Maecenas elit quam, eestas eget placerat non, fringilla vel eros. Nam scriptsicula Elementum nulla sed hậu quả. Phasellus eu erat enim. Ca ngợi tại magna non massa dapibus scelerisque trong eu lorem.
.phần accordion: đích nền: #FFF; phần đệm: 10px; .accordion phần: đích: hover nền: #FFF; phần .accordion: mục tiêu h2 width: 100%; phần .accordion: đích h2 a color: # 333; đệm: 0; .accordion phần: đích p display: block; .accordion phần h2 a padding: 8px 10px; hiển thị: khối; cỡ chữ: 16px; font-weight: bình thường; màu: #eee; trang trí văn bản: không có;
Đoạn mã trên sẽ thay đổi kích thước của slide để phù hợp với phần còn lại của accordion và thay đổi màu nền thành màu trắng. Đoạn văn đã bị ẩn, vì vậy bây giờ trên mục tiêu chúng ta cần hiển thị đoạn văn.
Bây giờ khi bạn nhấp vào tiêu đề của accordion, slide sẽ thay đổi kiểu để hiển thị nội dung của slide.
4. Accordion ngang
Đoạn mã trên sẽ tạo ra accordion chung bây giờ chúng ta có thể bắt đầu thực hiện các thay đổi CSS cho sự khác biệt giữa accordion ngang và dọc. Cả hai accordion này đều có cùng chức năng nhưng kiểu dáng tiêu đề sẽ khác nhau.
.mặt cắt ngang chiều rộng: 5%; chiều cao: 250px; -moz-quá trình chuyển đổi: chiều rộng 0,2s dễ dàng thoát ra; -webkit-quá trình chuyển đổi: chiều rộng 0,2s dễ dàng; -o-trans: độ rộng 0,2s dễ dàng; chuyển tiếp: chiều rộng 0,2s dễ dàng ra;
Đầu tiên chúng ta đặt chiều rộng của phần tiêu đề đến 5% vì vậy nó là một slide kín. Vì phần vừa là tiêu đề vừa là nội dung cho slide, chúng ta cần thêm hình động để hiển thị nội dung bằng cách sử dụng thuộc tính chuyển đổi.
/ * Định vị số phần của slide * / .horizontal: after top: 140px; trái: 15px;
Vị trí của số trên trang chiếu sẽ là cùng một vị trí trên mỗi tiêu đề đóng, chúng được định vị khác với tiêu đề dọc.
/ * Tiêu đề của slide đóng * / .horizontal phần h2 -webkit-Transform: rotation (90deg); -moz-Transform: xoay (90deg); -o-Transform: xoay (90deg); biến đổi: xoay (90deg); chiều rộng: 240px; vị trí: tương đối; bên trái: -100px; trên cùng: 85px; / * Trên chuột trên slide mở * / .horizontal: target width: 73%; chiều cao: 230px; .horizontal: đích h2 top: 0px; trái: 0; -webkit-Transform: xoay (0deg); -moz-Transform: xoay (0deg); -o-Transform: xoay (0deg); biến đổi: xoay (0deg);
Đoạn mã trên sẽ thay đổi kích thước của slide để phù hợp với phần còn lại của accordion. Dòng tiêu đề được xoay theo chiều dọc để chạy xuống tiêu đề nhưng bây giờ với slide mở, chúng ta cần thay đổi văn bản trở lại theo chiều ngang bằng cách xoay văn bản trở về 0 độ.
5. Đường thẳng đứng
Accordion dọc hoạt động tương tự như accordion ngang trừ chúng ta cần thay đổi Chiều cao thay cho chiều rộng và chúng ta không cần thay đổi sự liên kết của văn bản.
.phần dọc chiều rộng: 100%; chiều cao: 40px; -webkit-quá trình chuyển đổi: chiều cao 0,2s dễ dàng; -moz-quá trình chuyển đổi: chiều cao 0,2s dễ dàng thoát ra; -o-trans: độ cao 0,2s dễ dàng thoát ra; chuyển tiếp: chiều cao 0,2s dễ dàng ra; / * Đặt chiều cao của trang chiếu * / .vertical: target height: 250px; chiều rộng: 97%;
Trên Mục tiêu sự kiện của accordion dọc chúng ta sẽ thay đổi Chiều cao của tiêu đề để hiển thị slide.
.phần dọc h2 vị trí: tương đối; trái: 0; trên cùng: -15px; / * Đặt vị trí của số trên trang chiếu * / .vertical: sau top: -60px; bên trái: 810px; phần .vertical: đích: sau left: -9999px;
Ở trên sẽ thay đổi Chức vụ của văn bản tiêu đề trên slide đóng. Với slide đóng, chúng ta cần đặt Chức vụ của số nằm ở bên phải của accordion. Khi slide mở, chúng ta cần ẩn số này trên tiêu đề khi mục tiêu được đặt để chúng ta thay đổi vị trí bên trái khỏi màn hình.
Bây giờ khi bạn nhấp vào tiêu đề của accordion, slide sẽ thay đổi kiểu để hiển thị nội dung của slide.
Ghi chú của biên tập viên: Bài này được viết bởi Paul Underwood cho Hongkiat.com. Paul là một nhà phát triển web PHP từ Bristol, Vương quốc Anh. Ông viết hướng dẫn về Phát triển Web: các chủ đề chính bao gồm PHP, jQuery, CSS3 và HTML5. Ông cũng ghi lại các đoạn mã hữu ích tại Paulund.co.uk.
