Cara Membuat Akordeon Konten Berbasis CSS
Dalam tutorial hari ini kita akan belajar bagaimana cara membuat konten akordeon horisontal dan vertikal dengan hanya menggunakan CSS3. Ada banyak plugin jQuery yang dapat melakukan pekerjaan ini untuk Anda tetapi apa yang Anda lakukan jika pengunjung menonaktifkan Javascript, maka akordeon tidak akan berfungsi dengan benar. Jika akordeon Anda murni dalam CSS maka itu akan berfungsi untuk semua pengunjung Anda.
Kami akan membuat horisontal dan vertikal konten akordeon. Dengan mengklik teks judul, slide akan terbuka menampilkan konten lengkap, dan inilah preview cepat (screenshot) bagaimana mereka terlihat seperti.
Seperti yang kau lihat? Biarkan pengkodean dimulai!
1. Mempersiapkan HTML dan Konten
Untuk memulainya kita akan membuat HTML untuk akordeon.
Struktur membutuhkan wadah div dan kemudian memiliki bagian untuk setiap slide dalam akordeon. Dalam contoh ini kita akan memiliki 5 slide. Setiap slide akan memiliki judul dan paragraf untuk konten.
Tentang kami
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Tidak seperti itu, pilihlah, duduklah bersama elemen saya. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat conge dolor vitae adipiscing. Aliquam ac erat lorem, dan iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Semua orang dapat menemukan massa, atau porta yang terkait. Dengan demikian, Anda tidak akan perlu melihat apa-apa, fringilla atau eros. Misalnya, elemen elemental nulla sed akibat. Phasellus eu erat enim. Terpuji di magna non massa dapibus scelerisque di eu lorem.
Jasa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Tidak seperti itu, pilihlah, duduklah bersama elemen saya. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat conge dolor vitae adipiscing. Aliquam ac erat lorem, dan iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Semua orang dapat menemukan massa, atau porta yang terkait. Dengan demikian, Anda tidak akan perlu melihat apa-apa, fringilla atau eros. Misalnya, elemen elemental nulla sed akibat. Phasellus eu erat enim. Terpuji di magna non massa dapibus scelerisque di eu lorem.
Blog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Tidak seperti itu, pilihlah, duduklah bersama elemen saya. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat conge dolor vitae adipiscing. Aliquam ac erat lorem, dan iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Semua orang dapat menemukan massa, atau porta yang terkait. Dengan demikian, Anda tidak akan perlu melihat apa-apa, fringilla atau eros. Misalnya, elemen elemental nulla sed akibat. Phasellus eu erat enim. Terpuji di magna non massa dapibus scelerisque di eu lorem.
Portofolio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Tidak seperti itu, pilihlah, duduklah bersama elemen saya. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat conge dolor vitae adipiscing. Aliquam ac erat lorem, dan iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Semua orang dapat menemukan massa, atau porta yang terkait. Dengan demikian, Anda tidak akan perlu melihat apa-apa, fringilla atau eros. Misalnya, elemen elemental nulla sed akibat. Phasellus eu erat enim. Terpuji di magna non massa dapibus scelerisque di eu lorem.
Kontak
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Tidak seperti itu, pilihlah, duduklah bersama elemen saya. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat conge dolor vitae adipiscing. Aliquam ac erat lorem, dan iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Semua orang dapat menemukan massa, atau porta yang terkait. Dengan demikian, Anda tidak akan perlu melihat apa-apa, fringilla atau eros. Misalnya, elemen elemental nulla sed akibat. Phasellus eu erat enim. Terpuji di magna non massa dapibus scelerisque di eu lorem.
Sekarang kita memiliki slide kita, kita dapat mulai merancang akordeon.
2. Styling CSS
Pertama-tama kita perlu memberi style pada isi div dari akordeon. Ini akan memberi kita gambaran tentang bagaimana menampilkan setiap slide dan setiap berita utama.
/ * Tentukan kotak Accordion * / .accordion width: 830px; overflow: disembunyikan; margin: 10px otomatis; warna: # 474747; latar belakang: # 414141; padding: 10px;
Selanjutnya kita akan membuat berita utama untuk setiap slide.
.bagian akordeon float: left; overflow: disembunyikan; warna: # 333; kursor: pointer; latar belakang: # 333; margin: 3px; Bagian .accordion: hover background: # 444;
Kami mengatur warna latar belakang menjadi abu-abu gelap pada bagian tersebut menjadi judul di mana pengunjung akan mengklik untuk menampilkan slide. Kami menggunakan bagian ini untuk informasi utama dan konten yang berarti kami dapat menggunakan lebih sedikit HTML dan menggunakan kembali judul slide sebagai judul dari konten.
.bagian akordeon p display: none;
Saat ini semua slide akan ditutup sehingga kita perlu memastikan bahwa paragraf disembunyikan dari tampilan sampai slide terbuka, jadi untuk sekarang mengatur tampilan paragraf ke none.
.bagian akordeon: after position: relative; ukuran font: 24px; warna: # 000; font-weight: bold; .bagian akordion: nth-child (1): after content: '1'; Bagian .accordion: nth-child (2): after content: '2'; Bagian .accordion: nth-child (3): after content: '3'; Bagian .accordion: nth-child (4): after content: '4'; .bagian akordion: nth-child (5): after content: '5';
Dengan slide ditutup, kami ingin menampilkan nomor di bagian bawah judul untuk mengatakan nomor mana yang kami geser. Untuk ini kita akan menggunakan CSS untuk menambahkan konten setelah judul bagian, ini dapat dilakukan dengan menggunakan :setelah pemilih pseudo-class.
Sekarang kita telah membuat judul untuk slide kita dapat membuat event klik untuk menampilkan slide dalam akordeon. Tetapi ada masalah, CSS tidak memiliki acara klik, itulah sebabnya akordeon biasanya dibuat dengan menggunakan jQuery sehingga kami dapat melampirkan acara klik ke teks judul.
Kita perlu meniru acara klik di CSS yang dapat dilakukan dengan menggunakan :target pemilih pseudo-class.
3. Menggunakan :target Pemilih pseudo-class
:target memungkinkan kita untuk mendesain pengidentifikasi fragmen. Terkadang kami menggunakan tag jangkar pada halaman untuk menunjuk ke suatu tempat pada halaman. Pada mengklik tautan tersebut id di tag jangkar menjadi target dan Anda dapat gaya ini dengan menggunakan :target pemilih.
Untuk menambahkan ini ke dalam akordeon, kita perlu menambahkan tautan di sekitar judul yang menunjuk ke id dari slide.
Tentang kami
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Tidak seperti itu, pilihlah, duduklah bersama elemen saya. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat conge dolor vitae adipiscing. Aliquam ac erat lorem, dan iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Semua orang dapat menemukan massa, atau porta yang terkait. Dengan demikian, Anda tidak akan perlu melihat apa-apa, fringilla atau eros. Misalnya, elemen elemental nulla sed akibat. Phasellus eu erat enim. Terpuji di magna non massa dapibus scelerisque di eu lorem.
.bagian akordeon: target background: #FFF; padding: 10px; .accordion section: target: hover background: #FFF; . Bagian persetujuan: target h2 width: 100%; . Bagian persetujuan: target h2 a color: # 333; bantalan: 0; .accordion section: target p display: block; .bagian akordisi h2 a padding: 8px 10px; display: blok; ukuran font: 16px; font-weight: normal; warna: #eee; teks-dekorasi: tidak ada;
Kode di atas akan mengubah ukuran slide agar sesuai dengan sisa akordeon dan mengubah warna latar menjadi putih. Paragraf itu disembunyikan jadi sekarang pada target kita perlu menampilkan paragraf.
Sekarang ketika Anda mengklik pada judul akordeon slide akan berubah gaya untuk menampilkan konten slide.
4. Akordeon Horisontal
Kode di atas akan membuat akordeon umum sekarang kita dapat mulai membuat perubahan CSS untuk perbedaan antara akordeon horizontal dan vertikal. Kedua akordeon ini memiliki fungsi yang sama tetapi gaya tajuk akan berbeda.
.bagian horizontal lebar: 5%; tinggi: 250px; -moz-transisi: lebar 0,2s kemudahan-keluar; -webkit-transisi: lebar 0,2s kemudahan-keluar; -o-transisi: lebar 0,2s kemudahan-keluar; transisi: lebar 0,2 detik kemudahan;
Pertama kita atur lebar dari bagian judul hingga 5% sehingga ini adalah slide tertutup. Karena bagian tersebut adalah judul dan konten untuk slide, kita perlu menambahkan animasi untuk menampilkan konten dengan menggunakan properti transisi.
/ * Posisikan jumlah slide * / .horizontal bagian: setelah top: 140px; kiri: 15px;
Posisi angka pada slide akan menjadi posisi yang sama pada setiap tajuk tertutup yang diposisikan berbeda dengan tajuk vertikal.
/ * Header slide tertutup * /. Bagian horisontal h2 -webkit-transform: rotate (90deg); -moz-transform: rotate (90deg); -o-transform: rotate (90deg); transform: rotate (90deg); lebar: 240px; posisi: relatif; kiri: -100px; atas: 85px; / * Pada mouse di atas slide terbuka * / .horizontal: target width: 73%; tinggi: 230px; .horizontal: target h2 top: 0px; kiri: 0; -webkit-transform: rotate (0deg); -moz-transform: rotate (0deg); -o-transform: rotate (0deg); transform: rotate (0deg);
Kode di atas akan mengubah ukuran slide agar sesuai dengan sisa akordeon. Headline diputar secara vertikal untuk menjalankan headline tetapi sekarang dengan slide terbuka kita perlu mengubah teks kembali menjadi horizontal dengan memutar teks kembali ke 0 derajat.
5. Akordeon Vertikal
Akordeon vertikal bekerja dengan cara yang sama seperti akordeon horizontal kecuali kita perlu mengubah tinggi bukannya lebar dan kita tidak perlu mengubah perataan teks.
.bagian vertikal lebar: 100%; tinggi: 40px; -webkit-transisi: tinggi 0,2s kemudahan-keluar; -moz-transisi: tinggi 0,2s kemudahan-keluar; -o-transisi: tinggi 0,2 detik memudahkan; transisi: tinggi 0,2 detik kemudahan; / * Atur ketinggian slide * / .vertical: target height: 250px; lebar: 97%;
Di target peristiwa akordeon vertikal kita akan mengubah tinggi dari judul untuk menampilkan slide.
.bagian vertikal h2 posisi: relatif; kiri: 0; atas: -15px; / * Atur posisi angka pada slide * / .vertical section: after top: -60px; kiri: 810px; .vertical section: target: after left: -9999px;
Di atas akan mengubah posisi teks judul pada slide tertutup. Dengan slide tertutup kita perlu mengatur posisi dari nomor yang terletak di sebelah kanan akordeon. Ketika slide terbuka, kita perlu menyembunyikan nomor ini pada judul ketika target diatur sehingga kita mengubah posisi kiri dari layar.
Sekarang ketika Anda mengklik pada judul akordeon slide akan berubah gaya untuk menampilkan konten slide.
Catatan Editor: Posting ini ditulis oleh Paul Underwood untuk Hongkiat.com. Paul adalah Pengembang Web PHP dari Bristol, UK. Dia menulis tutorial tentang Pengembangan Web: mata pelajaran utama termasuk PHP, jQuery, CSS3 dan HTML5. Dia juga merekam cuplikan kode yang bermanfaat di Paulund.co.uk.
