Cara Membuat Menu Accordion Dengan CSS 3

Pada saat membuat template Black Accordion, gw menyadari bahwa sebenarnya efek accordion itu bisa di buat hanya dengan kode CSS 3 saja. Kenapa? salah satu alasannya adalah adanya penambahan fungsi :target pada CSS3.. dimana kode ini bisa membuat koneksi antar element yang berada pada satu tag id. Apa sih maksudnya?

<div id="test">
Elemen-1
Elemen-2
</div>

Contoh diatas menandakan bahwa Elemen-1 dan Elemen-2 berada dalam satu tag id. Yaitu id "test" (teks Hijau). Nah,dalam teknik membuat Accordion ini sendiri,pengunaan kode :target berarti membuat Elemen-2 hanya terlihat ketika kita meng-klik Elemen-1.

Kasarnya,target Elemen-1 ketika di klik adalah membuka Elemen yang kedua. Kira-kira sudah cukup paham kan..?

Biasanya,efek Accordion di buat dengan Jquery yang digabungkan dengan perintah JavaScript.. dan hasilnya memang bagus. Namun permasalahannya, penggunaan script-script tersebut terkadang malah menambah lemot loading page template kita.

Disatu sisi,memasang efek-efek keren untuk mempercantik tampilan blog kita memang hal yang bagus..,tetapi akan jadi merugikan,kalo akhirnya script-script tersebut malah membuat pengunjung kabur karena bosan menunggu loading page blog kita. tul..?

Tidak hanya itu saja,permasalahan lain yang sering dialami oleh para blogger ketika mempercantik blognya adalah  masalah ruang. Keterbatasan ruang pada template sering mengakibatkan widget-widget terlihat menumpuk dan berantakan. Hal ini akhirnya mengurangi kenyamanan pengunjung saat membaca artikel kita.

Nah,salah satu cara yang bisa mengatasi semua permasalahan itu,adalah memasang Menu Accordion CSS3. Selain mengirit ruang dalam template,Accordion yang satu ini juga tidak membuat berat loading page. Untuk masalah efek,juga tidak kalah koq dengan Accordion yang di buat menggunakan Jquery dan JavaScript.

Tutorial mengenai Menu Accordion CSS3 sebenarnya sudah agak banyak diajarkan di beberapa web.. namun,apa yang mereka terapkan itu terkesan rumit bagi para pemula. Kode –webkit-transition yang mereka gunakan terkesan sulit di terapkan.

Maka,gw pun mencari cara lainnya yang lebih sederhana dalam membuatnya. Dan,Bingo! gw berhasil membuat Efek Accordion yang lebih sederhana yang gw yakin belum ada di tutorial-tutorial lainnya. Kode CSS yang gw gunakan sebenarnya simple.. hanya pada kode display.Namun,dengan sedikit ber-kreasi,ternyata bisa memberi efek yang bagus.Bahkan bisa membuat warna berbeda pada tab yang aktif tanpa javascript.

Sebelum kita mulai belajar cara membuat nya,sobat bisa melihat dulu preview Menu Accordion melalui link Demo CSS 3 Accordion.

Kalo sudah,sekarang saatnya kita belajar cara membuatnya.. Ready Go!

* Login ke Account Blogger,kemudian ke Design/Rancangan dan pilih tab EDIT HTML.
(Jangan lupa klik Download Template Lengkap untuk berjaga” apabila ada kesalahan dalam mengedit nantinya)


* Masukkan kode berikut ini sebelum kode ]]></b:skin>

#acc{background:#666;font:13px trebuchet ms;
line-height:1.2em;padding:10px;margin:0;}
#acc h3{background:-moz-linear-gradient(top,#ccc,#999);padding:5px 10px;margin:0;color:#222;
text-shadow:0px 1px 1px #fff;
border-bottom:2px solid #444;}
#acc h3 a{color:#555}
#acc h3 a:hover{color:#000}
#acc .post{background:#fff;color:#000;padding:10px;margin:10px 0px;display:none;
border-bottom:2px solid #222;}
#acc :target h3 + .post {display:block;height:150px;overflow:auto;}
#acc :target h3 a{color:#aa5500}

* Save template sobat. Selanjutnya yang perlu kita lakukan adalah memasukkan kode HTML nya.

* Masuklah ke menu Page Element,klik Add a Gadget pada letak yang sobat inginkan,kemudian pilih HTML/Javascript.

 

 

 

 

 

* Layar baru akan terbuka.

* Masukkan kode dibawah ini ke dalam kolom Content/Konten.

<div id="acc">
<div id="isi1">
<h3><a href="#isi1">Judul 1</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget
</div>
</div>
<div id="isi2">
<h3><a href="#isi2">Judul 2</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget
</div>
</div>
<div id="isi3">
<h3><a href="#isi3">Judul 3</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget
</div>
</div>
</div>

Note:
Ganti teks berwarna merah dengan pesan ataupun kode widget yang sobat inginkan.
Ganti teks berwarna hijau dengan judul dari widget / teks yang sobat pasang.

* Save hasil kerja sobat,dan lihat hasilnya. Semoga bermanfaat.. ^^