Membuat Accordion Dengan CSS Murni

Membuat Accordion Dengan CSS Murni

Tuto-rial.com – Artikel terbaru saat ini adalah mengenai bagaimana Membuat accordion dengan CSS Murni. Ya, artikel ini akan menjelaskan bagaimana membuat sebuah accordion hanya menggunakan CSS saja. Cara kerjanya yaitu menggunakan fungsi checked pada elemen checkbox. Jika Anda lebih menyukai atau memilih menggunakan animasi yang halus, anda bisa menggunakan fasilitas dari jQuery atau JavaScript, dan itu terserah anda.

Kasus pengguna pertama saya bisa memikirkan untuk sumber daya ini adalah “lapisan terorganisir”. Hal tersebut anda bisa menemukan dam tampilan sidebar pada Sublime Text, atau Photoshop layer window. Lagi pula, saya yakin Anda akan menemukan penggunaan sebuah bagian kecil yang baru ini untuk menyimpan di gudang Anda.

Untuk Ikon, Anda bisa mendapatkannya di situs ini: Nucleoapp.com

Membuat struktur HTML

Unutk pembuatan Struktur HTML cukup sederhana, Accordion adalah daftar tak terurutkan (unordered list). Jika list item berisi dari sub-items, maka kita akan memasukkan input[type=checkbox]  dan label. Maka dari itu, kita akan menambahkan kelas .anak untuk list item. Semua “standar” list item hanya berisi anchor tag.

Menambahkan CSS

Kami menggunakan teknik yang tak biasa, mungkin bisa disebut teknik cerdik(tapi cukup standar) yaitu bagaimana caranya untuk mendeteksi klik dan menunjukkan bagian dari sub konten dengan hanya menggunakan CSS. Caranya dengan memasukkan unsur masukan kotak centang(Checkbox), kita dapat menggunakan :checked pada elemen pseudo-class dan bagian selector yang berdekatan (div+div) untuk mengubah mode tampilan dari sub<ul>  elemen dari posisi “sembunyi” atau “tidak tampak” sampai posisi “tampil” atau “terlihat.

Tutorial lainya   Tutorial Membuat Shortcode pada Wordpress

Pertama-tama, kita harus memastikan bahwa elemen input checkbox mencakup seluruh list item yang berisi dari bagian subitems. Dengan kata kata lain: kita harus membuat kustom dari lemen checkbox. Jadi, Anda perlu memastikan bahwa ketika Anda klik pada label, checkbox tersebut juga dalam keadaan dicentang juga. Hal ini dapat dicapai dengan menggunakan atribut “for” dalam label (atribut “for”= input “nama” dan atribut “id”. Lihat bagian html di atas). Dengan cara ini Anda dapat menyembunyikan elemen input dan bekerja dengan label sebagai gantinya.

Sekarang perhatikan dalam struktur HTML pada bagian input, label dan unordered list (yang terlihat ketika diklik) adalah berhubungan erat/saling berkaitan. Dengan menggunakan fungsi :checked dari elemen pseudo-class, Anda dapat mengatur proses berikut dalam sebuah gerakan, ketika input dicentang(klik pada label), kemudian mengambil bagian dari elemen <ul> dan mengubah tampilan dengan posisi “sembunyi” menjadi “tampil”.

Tutorial lainya   Membuat Animasi Intro pada Section

Jika Anda ingin menambah animasi yang halus dan lembut pada tahap pembukaan, anda bisa saja menambahkan fitur tersebut dengan Jquery atau JavaScipt karena pada artikel ini menerangkan bagaimana membuat accordion dengan CSS murni. Demikian artikel mengenai bagaimana membuat accordion dengan CSS murni ini saya sampaikan, semoga bermanfaat. Jika ada kritik dan saran, kekurangan dalam penulisan, silahkan sampaikan pada kolom komentar di bawah ini.

Tutorial lainya   Tutorial Membuat Navigasi Tab yang Responsif
accordion-css-file Demo
Penulis Tutorial

Penulis Tutorial

Kata terindah

2 komentar pada "Membuat Accordion Dengan CSS Murni"

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *