4 cách để tạo ra các thỏa thuận chỉ CSS tuyệt vời
Nội dung accordion làm cho một mẫu thiết kế hữu ích. Bạn có thể sử dụng chúng cho nhiều thứ khác nhau: cho menu, danh sách, hình ảnh, đoạn trích bài viết, đoạn văn bản và thậm chí cả video
Hầu hết các hiệp ước ngoài kia dựa vào JavaScript, chủ yếu trên jQuery, nhưng vì việc sử dụng các kỹ thuật CSS3 tiên tiến đã trở nên phổ biến, chúng ta cũng có thể tìm thấy các ví dụ hay chỉ sử dụng HTML và CSS, làm cho chúng có thể truy cập được trong các môi trường có JavaScript bị vô hiệu hóa.
Tạo các hiệp ước chỉ CSS có thể là một nhiệm vụ khó khăn, vì vậy trong bài đăng này, chúng tôi sẽ cố gắng hiểu các khái niệm chính mà các nhà phát triển sử dụng khi họ cần tạo.
Trong việc tạo các tab chỉ CSS thường có hai cách tiếp cận chính, mỗi tab có hai trường hợp sử dụng thường xuyên. Cách tiếp cận đầu tiên sử dụng yếu tố hình thức ẩn, trong khi cái thứ hai sử dụng Bộ chọn giả CSS.
1. Phương pháp nút radio
Phương thức nút radio thêm đầu vào radio ẩn và thẻ nhãn tương ứng vào mỗi tab của accordion. Logic rất đơn giản: khi người dùng chọn một tab, về cơ bản họ sẽ kiểm tra nút radio thuộc về tab đó, giống như cách họ điền vào một biểu mẫu. Khi họ nhấp vào tab tiếp theo trong accordion, họ chọn nút radio tiếp theo, v.v..
Trong phương pháp này, chỉ một tab có thể mở cùng một lúc. Logic của HTML trông giống như thế này:
Tiêu đề nội dung (không sử dụng thẻ h1 tại đây)
Một số nội dung
p>
Bạn cần phải thêm một cặp nhãn radio riêng cho mỗi tab trong đàn accordion. Riêng HTML sẽ không cung cấp hành vi mong muốn, bạn cũng cần thêm các quy tắc CSS phù hợp, hãy xem cách bạn có thể thực hiện điều đó.
Đã sửa chiều cao Tab dọc
Trong giải pháp này (xem ảnh chụp màn hình bên dưới), nhà phát triển đã ẩn nút radio với sự trợ giúp của không trưng bày; quy tắc, sau đó anh ta đưa ra một vị trí tương đối cho thẻ nhãn giữ tiêu đề của mỗi tab và một vị trí tuyệt đối với vị trí tương ứng nhãn: sau yếu tố giả.
Cái sau giữ tay cầm được đánh dấu bằng dấu + màu xanh lá cây mở các tab. Các tab đóng cũng sử dụng một tay cầm được đánh dấu màu xanh lá cây “-” dấu hiệu. Trong CSS, các tab đóng được chọn với sự trợ giúp của bộ chọn phần tử + phần tử.
Bạn cũng cần cung cấp cho nội dung của tab mở có chiều cao cố định. Để thực hiện việc này, hãy chọn phần thân của tab mở (được đánh dấu bằng lớp nội dung tab trong HTML ở trên) với sự trợ giúp của bộ chọn CSS Element1 ~ Element2.
Logic cơ bản của CSS ở đây là như sau:
đầu vào [type = radio] display: none; nhãn vị trí: tương đối; hiển thị: khối; nhãn: sau nội dung: "+"; vị trí: tuyệt đối; phải: 1em; đầu vào: đã kiểm tra + nhãn: sau nội dung: "-"; đầu vào: đã kiểm tra ~ .tab-content height: 150px;
Bạn có thể xem CSS đầy đủ ở đây trên Codepen. CSS ban đầu được viết bằng Sass, nhưng nếu bạn nhấp vào “Xem tổng hợp” nút, bạn có thể thấy tập tin CSS đã biên dịch.
Hình ảnh phù hợp với các nút radio
Accordion hình ảnh đẹp này sử dụng cùng một phương pháp nút radio, nhưng thay vì nhãn, nhà phát triển ở đây đã sử dụng thẻ HTML figcaption để thực hiện hành vi accordion.
CSS có phần khác nhau, chủ yếu là vì trong trường hợp này, các tab không được đặt theo chiều dọc mà theo chiều ngang. Nhà phát triển đã sử dụng bộ chọn CSS phần tử + phần tử (đã được sử dụng trong trường hợp trước để chọn các nút) để đảm bảo rằng các cạnh của hình ảnh được che phủ vẫn còn hiển thị.
Đọc hướng dẫn chi tiết về cách tạo ra chiếc accordion chỉ CSS thanh lịch này.
2. Phương thức hộp kiểm
Phương thức hộp kiểm sử dụng loại đầu vào hộp kiểm thay vì nút radio. Khi người dùng chọn một tab, về cơ bản họ sẽ kiểm tra hộp kiểm tương ứng.
Sự khác biệt so với phương pháp nút radio là nó có thể mở nhiều tab cùng một lúc, giống như có thể kiểm tra nhiều hơn một hộp kiểm trong một biểu mẫu.
Mặt khác, các tab sẽ không tự đóng khi người dùng nhấp vào một tab khác. Logic của HTML vẫn giống như trước đây, chỉ trong trường hợp này bạn cần sử dụng hộp kiểm cho loại đầu vào.
Tiêu đề nội dung (không sử dụng thẻ h1 tại đây)
Một số nội dung
p>
Cố định hộp kiểm chiều cao cố định
Nếu bạn muốn các tab nội dung có chiều cao cố định, logic của CSS khá giống với trường hợp nút radio, đó chỉ là loại đầu vào đã thay đổi từ radio sang hộp kiểm. Trong bút Codepen này, bạn có thể xem mã.
Hộp kiểm chiều cao chất lỏng Accordion
Khi có nhiều hơn một tab được mở cùng một lúc, việc hiển thị các tab có chiều cao cố định có thể ảnh hưởng tiêu cực đến trải nghiệm người dùng vì chiều cao của cây đàn có thể tăng lên đáng kể. Điều này có thể được cải thiện nếu bạn thay đổi chiều cao cố định thành chiều cao chất lỏng; điều đó có nghĩa là chiều cao của các tab đang mở rộng hoặc co lại theo kích thước của nội dung mà chúng giữ.
Để làm như vậy bạn cần phải sửa đổi chiều cao cố định của nội dung tab thành chiều cao tối đa, và sử dụng các đơn vị tương đối:
đầu vào: đã kiểm tra ~ .tab-content max-height: 50em;
Nếu bạn muốn hiểu rõ hơn về cách thức hoạt động của phương pháp này, bạn có thể xem Codepen này.
3. Phương pháp: mục tiêu
: target là một trong những bộ chọn giả của CSS3. Với sự giúp đỡ của nó, bạn có thể liên kết một phần tử HTML với thẻ neo theo cách sau:
Tiêu đề của Tab
Nội dung của Tab
Khi người dùng nhấp vào tiêu đề của tab, toàn bộ phần sẽ mở ra nhờ vào :Mục tiêu bộ chọn giả và URL cũng sẽ được thay đổi thành định dạng sau: www.some-url.com/#tab-1.
Tab mở có thể được tạo kiểu trong CSS với sự trợ giúp của mục: quy tắc. Chúng tôi có một hướng dẫn tuyệt vời ở đây trên hongkiat về cách bạn có thể tạo ra các hiệp ước chỉ có CSS đẹp với :Mục tiêu phương pháp trong cả bố trí dọc và ngang.
Thiếu sót chính của :Mục tiêu phương pháp là nó thay đổi URL khi người dùng nhấp vào các tab. Điều này ảnh hưởng đến lịch sử trình duyệt và nút quay lại của trình duyệt sẽ không đưa người dùng đến trang trước mà chuyển sang trạng thái trước đó của accordion.
4. Phương pháp di chuột
Thiếu sót sau này có thể được khắc phục nếu chúng ta sử dụng :bay lượn CSS giả chọn thay vì :Mục tiêu, nhưng trong trường hợp này, các tab sẽ không phản ứng với nhấp chuột mà là sự kiện di chuột. Mẹo ở đây là bạn cần phải hoặc che giấu các yếu tố chưa được khám phá, hoặc là giảm chiều rộng hoặc chiều cao của chúng - tùy thuộc vào cách bố trí các tab
Phần tử được di chuột cần được hiển thị hoặc đặt thành chiều rộng / chiều cao đầy đủ để làm cho đàn accordion hoạt động.
Tất cả 3 hiệp ước chỉ CSS sau đây đều được thực hiện bằng phương thức: hover, nhấp vào các liên kết bên dưới ảnh chụp màn hình để xem mã.
Accordion hình ảnh ngang
Hiệp ước xiên
Accordion được kích hoạt với trạng thái mặc định
