4 Cara untuk Membuat Akordeon Khusus CSS yang Luar Biasa
Konten akordeon membuat pola desain yang bermanfaat. Anda dapat menggunakannya untuk banyak hal berbeda: untuk menu, daftar, gambar, kutipan artikel, cuplikan teks, dan bahkan video
Kebanyakan akordion di luar sana bergantung JavaScript, terutama di jQuery, tetapi karena penggunaan teknik CSS3 canggih menjadi tersebar luas, kami juga dapat menemukan contoh yang bagus hanya menggunakan HTML dan CSS, yang membuatnya dapat diakses di lingkungan dengan JavaScript yang dinonaktifkan.
Membuat akordeon khusus-CSS dapat menjadi tugas yang rumit, jadi dalam postingan ini kami akan mencoba memahami konsep utama yang digunakan pengembang ketika mereka perlu membuatnya.
Dalam membuat tab khusus CSS biasanya ada dua pendekatan utama, masing-masing memiliki dua kasus penggunaan yang sering. Pendekatan pertama memanfaatkan elemen bentuk tersembunyi, sedangkan yang kedua memanfaatkan Penyeleksi semu CSS.
1. Metode Tombol Radio
Metode Tombol Radio menambahkan input radio tersembunyi dan tag label yang sesuai ke setiap tab akordeon. Logikanya sederhana: ketika pengguna memilih tab, mereka pada dasarnya memeriksa tombol radio milik tab itu, dengan cara yang sama ketika mereka mengisi formulir. Ketika mereka mengklik tab berikutnya dalam akordeon, mereka memilih tombol radio berikutnya, dll.
Dalam metode ini, hanya satu tab yang bisa dibuka pada waktu bersamaan. Logika HTML terlihat seperti ini:
Judul Konten (jangan gunakan tag h1 di sini)
Beberapa konten ...
p>
Kamu butuh tambahkan pasangan label radio yang terpisah untuk setiap tab dalam akordeon. HTML saja tidak akan memberikan perilaku yang diinginkan, Anda perlu menambahkan aturan CSS yang sesuai juga, mari kita lihat bagaimana Anda bisa melakukannya.
Memperbaiki Tinggi Vertikal Tab
Dalam solusi ini (lihat tangkapan layar di bawah), pengembang menyembunyikan tombol radio dengan bantuan display: tidak ada; aturan, maka dia memberi posisi relatif ke tag label yang memegang judul setiap tab, dan posisi absolut untuk yang sesuai label: setelah elemen semu.
Yang terakhir memegang pegangan ditandai dengan tanda + hijau yang membuka tab. Tab yang ditutup juga menggunakan pegangan yang ditandai dengan warna hijau “-” tanda-tanda. Dalam CSS tab yang tertutup dipilih dengan bantuan elemen + elemen pemilih.
Anda juga harus memberi konten tab terbuka ketinggian tetap. Untuk melakukan ini pilih tubuh tab terbuka (ditandai dengan kelas-konten tab dalam HTML di atas) dengan bantuan elemen1 ~ element2 pemilih CSS.
Logika dasar CSS di sini adalah sebagai berikut:
input [type = radio] display: none; label position: relative; display: blok; label: setelah konten: "+"; posisi: absolut; kanan: 1em; input: dicentang + label: after content: "-"; input: dicentang ~ .tab-content height: 150px;
Anda dapat melihat CSS penuh di sini di Codepen. CSS awalnya ditulis dalam Sass, tetapi jika Anda mengklik “Lihat Dikompilasi” tombol, Anda dapat melihat file CSS yang dikompilasi.
Akordeon Gambar dengan Tombol Radio
Akordeon gambar yang indah ini menggunakan metode tombol radio yang sama, tetapi alih-alih label, pengembang di sini menggunakan tag HTML figcaption untuk mencapai perilaku akordeon.
CSS agak berbeda, terutama karena dalam hal ini tab tidak ditempatkan secara vertikal tetapi horizontal. Pengembang menggunakan elemen + elemen pemilih CSS (yang digunakan dalam kasus sebelumnya untuk memilih matikan) untuk memastikan bahwa tepi gambar yang tertutup masih tetap terlihat.
Baca panduan terperinci tentang cara membuat akordeon khusus CSS yang elegan ini.
2. Metode Kotak Centang
Metode kotak centang menggunakan tipe input kotak centang bukan tombol radio. Ketika pengguna memilih tab, mereka pada dasarnya memeriksa kotak centang yang sesuai.
Perbedaannya dibandingkan dengan metode tombol radio adalah itu mungkin untuk membuka lebih dari satu tab sekaligus, sama seperti itu mungkin untuk memeriksa lebih dari satu kotak centang di dalam formulir.
Di sisi lain, tab tidak akan menutup sendiri saat pengguna mengklik yang lain. Logika HTML sama dengan sebelumnya, hanya dalam hal ini Anda perlu menggunakan kotak centang untuk tipe input.
Judul Konten (jangan gunakan tag h1 di sini)
Beberapa konten ...
p>
Memperbaiki Akselerasi Kotak Centang
Jika Anda ingin tab konten ketinggian tetap, logika CSS hampir sama dengan pada kasus tombol radio, hanya saja jenis input telah berubah dari radio ke kotak centang. Dalam pena Codepen ini Anda dapat melihat kode.
Akordeon Ketinggian Kotak Cairan
Ketika lebih dari satu tab terbuka pada saat yang sama, menampilkan tab ketinggian tetap dapat secara negatif mempengaruhi pengalaman pengguna karena ketinggian akordeon dapat tumbuh secara signifikan. Ini dapat ditingkatkan jika Anda ubah ketinggian tetap menjadi tinggi fluida; itu berarti ketinggian tab terbuka mengembang atau menyusut sesuai dengan ukuran konten yang dipegangnya.
Anda harus melakukannya ubah ketinggian tetap konten tab ke ketinggian maksimal, dan menggunakan unit relatif:
input: dicentang ~ .tab-content max-height: 50em;
Jika Anda ingin lebih memahami cara kerja metode ini, Anda dapat melihat pada Codepen ini.
3. Metode: target
: target adalah salah satu penyeleksi semu CSS3. Dengan bantuannya Anda dapat menautkan elemen HTML ke tag anchor dengan cara berikut:
Judul Tab
Konten Tab
Ketika pengguna mengklik pada judul tab, seluruh bagian akan terbuka berkat :target pemilih semu, dan URL juga akan diubah ke format berikut: www.some-url.com/#tab-1.
Tab terbuka dapat ditata dalam CSS dengan bantuan bagian: target ... aturan. Kami memiliki tutorial yang bagus di sini tentang hongkiat tentang bagaimana Anda dapat membuat akordeon khusus CSS yang bagus dengan :target metode dalam tata letak vertikal dan horisontal.
Kelemahan utama dari :target Metode itu itu mengubah URL ketika pengguna mengklik tab. Ini memengaruhi riwayat peramban dan tombol kembali peramban tidak akan membawa pengguna ke halaman sebelumnya, tetapi ke kondisi sebelumnya pada akordeon.
4. Metode: hover
Kekurangan yang terakhir ini dapat diatasi jika kita memanfaatkan : melayang CSS pseudo-selector alih-alih :target, tetapi dalam kasus ini tab tidak akan bereaksi terhadap klik tetapi terhadap acara yang mengarahkan. Kuncinya di sini adalah bahwa Anda perlu baik menyembunyikan elemen yang belum ditemukan, atau kurangi lebar atau tingginya - tergantung pada tata letak tab
Elemen melayang perlu terlihat, atau diatur ke lebar penuh / tinggi untuk membuat akordeon berfungsi.
3 akordeon khusus CSS berikut semuanya dibuat dengan metode: hover, klik tautan di bawah screenshot untuk melihat kode.
Akordeon Gambar Horisontal
Akordeon miring
Hover-Activated Accordion Dengan Status Default
