CSS3 Accordion Tanpa JavaScript

05Nov11

Masih terkait dengan postingan CSS1K yang lalu, jika anda melihat demo CSS saya yang berjudul “1024-bytes” efek visualnya memang sangat terpengaruh dari efek accordion.

Biasanya, untuk membuat efek visual seperti accordion ini perlu digunakan JavaScript dikarenakan efek animasi yang tidak dimiliki CSS2.1, namun seiring perkembangannya khususnya dengan hadirnya fitur “transition” di CSS3 maka sebuah komponen accordion dapat dibuat murni menggunakan CSS.

Meski demikian terdapat beberapa keterbatasan daripada pembuatan accordion menggunakan CSS:

Bahwa pada dasarnya CSS tidak memiliki event listener untuk mouse click, namun bukan tidak ada cara sebenarnya, untuk menyiasati event click ini bisa digunakan trik yang memanfaatkan :target selector, hanya saja dengan syarat tiap elemen dari accordion memiliki nilai attribute href yang unik (itulah mengapa pada demo CSS saya accordionnya bereaksi pada event mouse hover saja karena markup HTML-nya sudah ditentukan dari sananya, tidak bisa diubah).

Kemudian pula, accordion yang dibuat menggunakan murni CSS ini adalah bersifat fixed (tidak fluid/responsive) dikarenakan nilai ukuran tidak dapat berdasar proporsi/perbandingan ukuran dengan elemen parentnya (yang kalau menggunakan JavaScript ini mudah saja dihitung) namun ditentukan besarnya secara fix.

Terakhir, tentu saja tidak semua browser mendukung fitur-fitur CSS terbaru ini, karena browser-browser lama belum memiliki implementasi CSS3. Berdasarkan data dari Mozilla (https://developer.mozilla.org/en/CSS), berikut daftar fitur yang didukung dan versi browsernya:

“transition / -webkit-transition / -moz-transition” property:
Chrome 1.0+, Safari 3.0+, Firefox 4.0+, Opera 10.5+, IE?

“:target” selector:
Chrome 1.0+, Safari 1.3+, Firefox 1.3+, Opera 9.5+, IE 9+

About these ads


2 Responses to “CSS3 Accordion Tanpa JavaScript”

  1. menarik, tapi saya bingung….

  2. Agak susah memahami tapi ini menarik


Berikan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s


Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 186 pengikut lainnya.

%d blogger menyukai ini: