4 Cara Membuat Accordions CSS-Only Awesome
Akordion kandungan membuat corak reka bentuk yang berguna. Anda boleh menggunakannya untuk pelbagai perkara: untuk menu, senarai, imej, petikan artikel, coretan teks, dan juga video
Kebanyakan akordion di sana bergantung JavaScript, terutamanya pada jQuery, tetapi sejak penggunaan teknik canggih CSS3 menjadi tersebar luas, kita juga dapat mencari contoh yang baik itu hanya gunakan HTML dan CSS, yang menjadikannya mudah diakses dalam persekitaran dengan JavaScript kurang upaya.
Mencipta akordion hanya dengan CSS boleh menjadi tugas yang rumit, jadi dalam jawatan ini kita akan cuba memahami konsep utama pemaju yang digunakan apabila mereka perlu membuat satu.
Dalam membuat tab CSS sahaja terdapat dua pendekatan utama, masing-masing mempunyai dua kes kerap digunakan. Pendekatan pertama menggunakan elemen bentuk tersembunyi, manakala yang kedua menggunakan Pseudo-selector CSS.
1. Kaedah Button Radio
Kaedah Tekan Radio menambah input radio tersembunyi dan tag label yang sepadan untuk setiap tab akordion. Logik adalah mudah: apabila pengguna memilih tab, mereka pada dasarnya memeriksa butang radio yang dimiliki oleh tab itu, dengan cara yang sama apabila mereka mengisi borang. Apabila mereka mengklik pada tab seterusnya dalam akordion, mereka memilih butang radio seterusnya, dan lain-lain.
Dalam kaedah ini, hanya satu tab boleh dibuka pada masa yang sama. Logik HTML kelihatan seperti ini:
Tajuk Kandungan (jangan gunakan tag h1 di sini)
Sesetengah kandungan ...
p>
Anda perlu tambah pasangan label radio yang berasingan untuk setiap tab dalam akordion. HTML sahaja tidak akan memberikan kelakuan yang diingini, anda perlu menambah peraturan CSS yang sesuai juga, mari kita lihat bagaimana anda boleh mencapai itu.
Tab Menegak Menegak Tetap
Dalam penyelesaian ini (lihat tangkapan skrin di bawah), pemaju menyembunyikan butang radio dengan bantuan paparan: tiada; peraturan, maka dia memberikan kedudukan relatif kepada label label yang memegang tajuk setiap tab, dan kedudukan mutlak kepada yang sepadan label: selepas pseudo-element.
Yang terakhir memegang pemegang ditandai dengan tanda hijau + yang membuka tab. Tab tertutup juga menggunakan pemegang yang ditandai dengan hijau “-” tanda-tanda. Dalam CSS, tab tertutup dipilih dengan bantuan pemilih unsur + elemen.
Anda juga perlu memberi kandungan tab terbuka ketinggian tetap. Untuk melakukan ini pilih badan tab terbuka (ditandai dengan kelas kandungan tab dalam HTML di atas) dengan bantuan elemen1 ~ element2 CSS selector.
Logik asas CSS di sini ialah yang berikut:
input [type = radio] display: none; label kedudukan: relatif; paparan: blok; label: selepas kandungan: "+"; kedudukan: mutlak; betul: 1em; input: checked + label: after content: "-"; input: checked ~ .tab-content height: 150px;
Anda boleh melihat CSS penuh di sini di Codepen. CSS pada asalnya ditulis dalam Sass, tetapi jika anda mengklik pada “Lihat Dikompilasi” butang, anda dapat melihat fail CSS yang dikompilasi.
Akordion Imej dengan Butang Radio
Akordion imej yang indah ini menggunakan kaedah butang radio yang sama, tetapi bukan label, pemaju di sini menggunakan tag HTML figcaption untuk mencapai tingkah akordion.
CSS agak berbeza, terutamanya kerana dalam kes ini tab tidak diletakkan secara menegak tetapi mendatar. Pemaju menggunakan elemen + elemen pemilih CSS (yang digunakan dalam kes sebelumnya untuk memilih toggles) untuk memastikan bahawa tepi imej yang dilindungi masih tetap kelihatan.
Baca panduan terperinci mengenai cara membuat ciptaan akordeon yang elegan ini.
2. Kaedah Peti Masuk
Kaedah kotak semak menggunakan jenis input kotak pilihan dan bukannya butang radio. Apabila pengguna memilih tab, mereka pada dasarnya menyemak kotak semak yang sama.
Perbezaannya berbanding kaedah butang radio ialah ia mungkin membuka lebih daripada satu tab pada masa yang sama, sama seperti mungkin untuk memeriksa lebih daripada satu kotak semak di dalam borang.
Sebaliknya, tab tidak akan menutup sendiri apabila pengguna mengklik pada yang lain. Logik HTML adalah sama seperti sebelumnya, dalam hal ini anda perlu menggunakan kotak centang untuk jenis input.
Tajuk Kandungan (jangan gunakan tag h1 di sini)
Sesetengah kandungan ...
p>
Kotak Cekapan Ketinggian Tetap Tetap
Sekiranya anda mahukan tab kandungan ketinggian tetap, logik CSS adalah hampir sama seperti dalam kes butang radio, ia hanya jenis input yang telah ditukar dari radio ke kotak semak. Dalam pena Codepen ini, anda boleh melihat kod tersebut.
Cakera Peti Tinggi Ketinggian Cecair
Apabila lebih daripada satu tab terbuka pada masa yang sama, memaparkan tab ketinggian tetap boleh menjejaskan pengalaman pengguna secara negatif kerana ketinggian akordion dapat berkembang dengan ketara. Ini boleh diperbaiki jika anda tukar ketinggian tetap kepada ketinggian bendalir; itu bererti ketinggian tab terbuka mengembangkan atau mengecut mengikut saiz kandungan yang mereka pegang.
Untuk berbuat demikian, anda perlu ubah suai ketinggian tetap kandungan tab ke ketinggian maksimum, dan menggunakan unit relatif:
input: checked ~ .tab-content max-height: 50em;
Sekiranya anda ingin lebih memahami cara kaedah ini berfungsi, anda boleh melihat Codepen ini.
3. Kaedah sasaran:
: sasaran adalah salah satu pseudo-selector CSS3. Dengan bantuannya, anda boleh menautkan elemen HTML ke teg anchor dengan cara berikut:
Tajuk Tab
Kandungan Tab
Apabila pengguna mengklik pada tajuk tab, keseluruhan seksyen akan terbuka terima kasih kepada : sasaran pseudo-selector, dan URL juga akan diubah ke format berikut: www.some-url.com/#tab-1.
Tab terbuka boleh ditata dalam CSS dengan bantuan seksyen: sasaran ... peraturan. Kami mempunyai tutorial hebat di sini di hongkiat tentang bagaimana anda boleh membuat accordion CSS yang bagus sahaja dengan : sasaran kaedah dalam susun atur menegak dan mendatar.
Kekurangan utama : sasaran kaedah itu ia mengubah URL apabila pengguna mengklik pada tab. Ini menjejaskan sejarah penyemak imbas dan butang belakang penyemak imbas tidak akan membawa pengguna ke laman sebelumnya, tetapi kepada keadaan sebelumnya akordion.
4. The: hover Method
Kelemahan yang terakhir ini boleh diatasi jika kita menggunakannya : berlegar Pseudo-pemilih CSS dan bukan : sasaran, tetapi dalam kes ini, tab tidak akan bertindak balas terhadap klik tetapi kepada acara hover. Silap mata di sini adalah yang anda perlukan sama ada menyembunyikan unsur-unsur yang tidak disenangi, atau mengurangkan lebar atau ketinggian mereka - bergantung pada susun atur tab
Elemen yang berlegar perlu dibuat, atau ditetapkan pada lebar / ketinggian penuh untuk membuat kerja akordion.
Ketiga-tiga akordion sahaja CSS yang dibuat dengan: kaedah hover, klik pada pautan di bawah tangkapan skrin untuk melihat kod.
Akordion Imej Mendatar
Kesepakatan Skewed
Akordion Bergerak Diaktifkan Dengan Negeri Lalai
