Cara Buat Akordion Kandungan Berasaskan CSS
Dalam tutorial hari ini kita akan belajar bagaimana kita boleh mencipta akordion kandungan mendatar dan menegak dengan hanya menggunakan CSS3. Terdapat banyak plugin jQuery yang boleh melakukan pekerjaan ini untuk anda tetapi apa yang anda lakukan jika pengunjung telah mematikan Javascript, maka akordion tidak akan berfungsi dengan betul. Jika akordion anda semata-mata dalam CSS maka ia akan berfungsi untuk semua pelawat anda.
Kami akan mencipta mendatar dan menegak akordion kandungan. Pada mengklik teks tajuk, slaid akan terbuka memaparkan kandungan penuh, dan di sini pratonton cepat (tangkapan skrin) bagaimana rupanya.
Seperti apa yang anda lihat? Biarkan pengekodan bermula!
1. Menyediakan HTML dan Kandungan
Untuk bermula dengan kami akan mencipta HTML untuk akordion.
Struktur memerlukan bekas div dan kemudian mempunyai seksyen untuk setiap slaid dalam akordion. Dalam contoh ini kita akan mempunyai 5 slaid. Setiap slaid akan mempunyai tajuk dan perenggan untuk kandungannya.
Tentang kita
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Pada masa yang sama, anda boleh menggunakannya. Anda mungkin mempunyai masa yang panjang. Anda boleh menggunakan ciri-ciri ini dengan menggunakan placet. Anda akan mendapat tempat yang tepat untuk masa yang lama. Etiam placerat congeal dolor vitae adipiscing. Anda boleh menggunakannya, sebagai contoh. Etiam mattis dignissim gravida. Tidak kira sama sekali, tidak sempit. Tidak ada sambungan antara massa, atau port untuk menimbulkan masalah. Anda boleh memilih dari mana-mana tempat, bukannya tempat, pinggan dan lain-lain. Ini adalah bahan yang tidak dapat dielakkan. Phasellus eu erat enim. Praesent di magna bukan massa dopibus scelerisque di lorem.
Perkhidmatan
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Pada masa yang sama, anda boleh menggunakannya. Anda mungkin mempunyai masa yang panjang. Anda boleh menggunakan ciri-ciri ini dengan menggunakan placet. Anda akan mendapat tempat yang tepat untuk masa yang lama. Etiam placerat congeal dolor vitae adipiscing. Anda boleh menggunakannya, sebagai contoh. Etiam mattis dignissim gravida. Tidak kira sama sekali, tidak sempit. Tidak ada sambungan antara massa, atau port untuk menimbulkan masalah. Anda boleh memilih dari mana-mana tempat, bukannya tempat, pinggan dan lain-lain. Ini adalah bahan yang tidak dapat dielakkan. Phasellus eu erat enim. Praesent di magna bukan massa dopibus scelerisque di lorem.
Blog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Pada masa yang sama, anda boleh menggunakannya. Anda mungkin mempunyai masa yang panjang. Anda boleh menggunakan ciri-ciri ini dengan menggunakan placet. Anda akan mendapat tempat yang tepat untuk masa yang lama. Etiam placerat congeal dolor vitae adipiscing. Anda boleh menggunakannya, sebagai contoh. Etiam mattis dignissim gravida. Tidak kira sama sekali, tidak sempit. Tidak ada sambungan antara massa, atau port untuk menimbulkan masalah. Anda boleh memilih dari mana-mana tempat, bukannya tempat, pinggan dan lain-lain. Ini adalah bahan yang tidak dapat dielakkan. Phasellus eu erat enim. Praesent di magna bukan massa dopibus scelerisque di lorem.
Portfolio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Pada masa yang sama, anda boleh menggunakannya. Anda mungkin mempunyai masa yang panjang. Anda boleh menggunakan ciri-ciri ini dengan menggunakan placet. Anda akan mendapat tempat yang tepat untuk masa yang lama. Etiam placerat congeal dolor vitae adipiscing. Anda boleh menggunakannya, sebagai contoh. Etiam mattis dignissim gravida. Tidak kira sama sekali, tidak sempit. Tidak ada sambungan antara massa, atau port untuk menimbulkan masalah. Anda boleh memilih dari mana-mana tempat, bukannya tempat, pinggan dan lain-lain. Ini adalah bahan yang tidak dapat dielakkan. Phasellus eu erat enim. Praesent di magna bukan massa dopibus scelerisque di lorem.
Hubungi
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Pada masa yang sama, anda boleh menggunakannya. Anda mungkin mempunyai masa yang panjang. Anda boleh menggunakan ciri-ciri ini dengan menggunakan placet. Anda akan mendapat tempat yang tepat untuk masa yang lama. Etiam placerat congeal dolor vitae adipiscing. Anda boleh menggunakannya, sebagai contoh. Etiam mattis dignissim gravida. Tidak kira sama sekali, tidak sempit. Tidak ada sambungan antara massa, atau port untuk menimbulkan masalah. Anda boleh memilih dari mana-mana tempat, bukannya tempat, pinggan dan lain-lain. Ini adalah bahan yang tidak dapat dielakkan. Phasellus eu erat enim. Praesent di magna bukan massa dopibus scelerisque di lorem.
Sekarang kita mempunyai slaid kita, kita boleh mula menghidupkan akordion.
2. CSS Styling
Pertama kita perlu gaya yang mengandungi div akordion. Ini akan memberi kita idea bagaimana untuk memaparkan setiap slaid dan setiap tajuk utama.
/ * Menetapkan kotak Akordion * / .accordion width: 830px; limpahan: tersembunyi; margin: 10px auto; warna: # 474747; latar belakang: # 414141; padding: 10px;
Seterusnya kita akan membuat tajuk utama bagi setiap slaid.
.seksyen accordion float: left; limpahan: tersembunyi; warna: # 333; kursor: penunjuk; latar belakang: # 333; margin: 3px; bahagian seksyen: hover latar belakang: # 444;
Kami menetapkan warna latar belakang menjadi kelabu gelap pada bahagian menjadi tajuk di mana pelawat akan mengklik untuk memaparkan slaid. Kami menggunakan bahagian ini untuk tajuk utama dan kandungan yang bermaksud kami dapat menggunakan kurang HTML dan menggunakan semula gelaran slaid sebagai tajuk kandungan.
.akordion seksyen p paparan: tiada;
Pada masa ini semua slaid akan ditutup supaya kita perlu memastikan bahawa perenggan itu tersembunyi dari paparan sehingga slaid dibuka, jadi untuk sekarang tetapkan paparan paragraf itu tidak ada.
.seksyen akordion: selepas kedudukan: saudara; saiz fon: 24px; warna: # 000; font-weight: bold; . Seksyen penyesuaian: nth-child (1): after content: '1'; . Seksyen penyesuaian: nth-child (2): after content: '2'; . Seksyen penyesuaian: nth-child (3): after content: '3'; . Seksyen penyesuaian: nth-child (4): after content: '4'; . Seksyen penyesuaian: nth-child (5): after content: '5';
Dengan slaid tertutup kami ingin memaparkan nombor di bahagian bawah tajuk utama untuk menyatakan nombor slaid kami. Untuk ini kita akan menggunakan CSS untuk menambah kandungan selepas tajuk bahagian, ini boleh dilakukan dengan menggunakan : selepas pseudo-class selector.
Sekarang kita telah mencipta tajuk untuk slaid yang kita boleh membuat acara klik untuk memaparkan slaid di akordion. Tetapi ada masalah, CSS tidak mempunyai acara klik, itulah sebabnya akordion biasanya dicipta dengan menggunakan jQuery supaya kita dapat melampirkan peristiwa klik ke teks tajuk utama.
Kita perlu meniru peristiwa klik di CSS yang boleh dilakukan dengan menggunakan : sasaran pseudo-class selector.
3. Menggunakan : sasaran pemilih kelas pseudo
: sasaran membolehkan kita menamakan pengenal fragmen. Kadang-kadang kita menggunakan tag anchor di halaman untuk menunjuk ke tempat pada halaman. Pada mengklik pautan itu ID dalam tag anchor menjadi sasaran dan anda boleh gaya ini dengan menggunakan : sasaran pemilih.
Untuk menambah ini ke dalam akordion, kita perlu menambah pautan di sekeliling tajuk yang menunjuk ke ID slaid.
Tentang kita
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Pada masa yang sama, anda boleh menggunakannya. Anda mungkin mempunyai masa yang panjang. Anda boleh menggunakan ciri-ciri ini dengan menggunakan placet. Anda akan mendapat tempat yang tepat untuk masa yang lama. Etiam placerat congeal dolor vitae adipiscing. Anda boleh menggunakannya, sebagai contoh. Etiam mattis dignissim gravida. Tidak kira sama sekali, tidak sempit. Tidak ada sambungan antara massa, atau port untuk menimbulkan masalah. Anda boleh memilih dari mana-mana tempat, bukannya tempat, pinggan dan lain-lain. Ini adalah bahan yang tidak dapat dielakkan. Phasellus eu erat enim. Praesent di magna bukan massa dopibus scelerisque di lorem.
.seksyen akordion: sasaran latar belakang: #FFF; padding: 10px; . Seksyen penyesuaian: target: hover background: #FFF; . Seksyen penyesuaian: sasaran h2 lebar: 100%; . Seksyen penyesuaian: target h2 a color: # 333; padding: 0; . Seksyen penyesuaian: target p display: block; . seksyen kesesuaian h2 a padding: 8px 10px; paparan: blok; saiz fon: 16px; font-weight: normal; warna: #eee; teks-hiasan: tiada;
Kod di atas akan mengubah saiz slaid agar sesuai dengan sangkakala akordion dan mengubah warna latar ke putih. Perenggan itu tersembunyi sehingga kini sasaran kami perlu memaparkan perenggan.
Sekarang apabila anda mengklik tajuk akordion, slaid akan mengubah gaya untuk memaparkan kandungan slaid.
4. Akordion mendatar
Kod di atas akan mewujudkan akordion umum sekarang kita boleh mula membuat perubahan CSS untuk perbezaan antara akordion mendatar dan menegak. Kedua-dua accordion ini mempunyai fungsi yang sama tetapi styling utama akan berbeza.
.bahagian mendatar lebar: 5%; ketinggian: 250px; -moz-transition: width 0.2s easy-out; -webkit-transition: width 0.2s easy-out; -o-peralihan: lebar 0.2s memudahkan; peralihan: lebar 0.2s memudahkan;
Pertama kami tetapkan lebar dari tajuk utama hingga 5% jadi ia adalah slaid tertutup. Oleh kerana bahagian itu adalah tajuk utama dan kandungan untuk slaid, kita perlu menambah animasi untuk memaparkan kandungan dengan menggunakan harta peralihan.
/ * Posisi bilangan slaid * / .horizontal seksyen: selepas top: 140px; kiri: 15px;
Kedudukan nombor pada slaid akan menjadi kedudukan yang sama pada setiap tajuk tertutup ini diposisikan secara berbeza dengan tajuk utama.
/ * Pengepala slaid tertutup * / .horizontal seksyen h2 -webkit-transform: berputar (90deg); -moz-transform: berputar (90deg); -o-transform: berputar (90deg); mengubah: putar (90deg); lebar: 240px; kedudukan: relatif; kiri: -100px; atas: 85px; / * Pada tetikus atas slaid terbuka * / .horizontal: target width: 73%; ketinggian: 230px; .horizontal: target h2 top: 0px; kiri: 0; -webkit-transform: putar (0deg); -moz-transform: putar (0deg); -o-transform: putar (0deg); mengubah: putar (0deg);
Kod di atas akan mengubah saiz slaid agar sesuai dengan akordion yang lain. Tajuk diputar secara menegak untuk melangkau tajuk tetapi kini dengan slaid terbuka kita perlu menukar teks kembali menjadi mendatar dengan memutar teks kembali ke 0 darjah.
5. Akordion Menegak
Akordion vertikal berfungsi dengan cara yang sama seperti akordion mendatar kecuali kita perlu mengubahnya ketinggian bukannya lebar dan kita tidak perlu menukar penjajaran teks.
.bahagian menegak lebar: 100%; ketinggian: 40px; -webkit-peralihan: ketinggian 0.2s memudahkan; -moz-peralihan: ketinggian 0.2s memudahkan; -o-peralihan: ketinggian 0.2s memudahkan; peralihan: ketinggian 0.2s memudahkan; / * Tetapkan ketinggian slaid * / .vertical: target height: 250px; lebar: 97%;
Pada sasaran peristiwa akordion menegak kita akan menukar ketinggian tajuk utama untuk memaparkan slaid.
.seksyen menegak h2 kedudukan: relatif; kiri: 0; atas: -15px; / * Tetapkan kedudukan nombor pada slaid * /. Seksyen pertukaran: selepas top: -60px; kiri: 810px; . seksyen beralih: sasaran: selepas kiri: -9999px;
Di atas akan mengubah kedudukan teks tajuk pada slaid tertutup. Dengan slaid tertutup kita perlu menetapkan kedudukan daripada bilangan yang terletak di sebelah kanan akordion. Apabila slaid terbuka, kita perlu menyembunyikan nombor ini pada tajuk utama apabila target ditetapkan supaya kita menukar kedudukan kiri dari skrin.
Sekarang apabila anda mengklik tajuk akordion, slaid akan mengubah gaya untuk memaparkan kandungan slaid.
Nota editor: Jawatan ini ditulis oleh Paul Underwood untuk Hongkiat.com. Paul adalah Pembangun Web PHP dari Bristol, UK. Dia menulis tutorial mengenai Pembangunan Web: subjek utama termasuk PHP, jQuery, CSS3 dan HTML5. Dia juga merekodkan coretan kod berguna di Paulund.co.uk.
