Tutorial CSS3 : Membuat Accordion Menu Sederhana Dengan CSS3 Tanpa Javascript

Akhirnya saya melihat dan ke kampus lagi, setelah hampir 2 minggu absen dari kegiatan per-kampus’an. Suasana kampus masih sama seperti dulu ketika saya lihat terakhir, masih dalam tahap renovasi. Terlihat lebih banyak buruh bangunannya daripada mahasiswanya. Mungkin lantaran masih dalam suasana libur lebaran, jadinya belum ada yang main-main ke kampus. Acara konversi nilai yang saya kira sudah selesai sebelum lebaran kemarin, ternyata masih berlangsung hingga sekarang dan ruang litbang yang dijadikan tempat konversi pun masih dipadati oleh petugas konversi. Akhirnya saya juga ikut nangkring disana, sekalian salam-salam’an minta maaf. Setelah itu, semua sibuk dengan tugasnya masing-masing. Saya juga menyibukkan diri dengan mencoba sebuah teknik baru, untuk membuat sebuah accordion menu sederhana dengan CSS3 tanpa menggunakan javascript. Ide ini saya dapatkan ketika bermain-main ke situs luar, tepatnya di CSS Tricks. Membuat menu dengan animasi yang atraktif, seakan menjadi lebih mudah dengan CSS3. Sayangnya menu accordion ini belum bisa berjalan di IE yang memang tidak mendukung CSS3. Nah, di bawah ini akan saya jelaskan sedikit cara pembuatannya.

1. Syntax html yang saya gunakan sangat sederhana agar mudah untuk dibaca. Kira-kira syntax html’nya seperti di bawah ini :

<div id="body">
		<div class="menu-accordion">
			<div id="1" class="sub">
				<h1><a href="#1">Menu 1</a></h1>
				<div>
				Konten 1
				</div>
			</div>
			<div id="2" class="sub">
				<h1><a href="#2">Menu 1</a></h1>
				<div>
				Konten 2
				</div>
			</div>
			<div id="3" class="sub">
				<h1><a href="#3">Menu 3</a></h1>
				<div>
				Konten 3
				</div>
			</div>
		</div>
</div>

2. Sekarang kita lanjut ke pembuatan komponen yang paling penting, yaitu CSS-nya. Mungkin jika ada yang membuka file demo-nya menggunakan firefox, efek transisinya tidak akan berjalan. Dan jika dibuka dengan menggunakan Chrome, maka efek transisinya akan terlihat. Saya juga kurang tau apa penyebabnya tersebut.

body{
	font-size:12px;
	font-family:Arial;
}
.menu-accordion {
 	background: #ccc;
 	border: 1px dashed #999;
	padding: 5px;
	width: 400px;
	margin: 0px auto;
}
.menu-accordion .sub {
 	border: 1px dashed #999;
	padding: 10px;
	background: #fff;
	margin:5px;
}
.menu-accordion ul {
 	list-style:square;
}
.menu-accordion li a {
 	text-decoration: none;
	color:red;
	font-weight: normal;
}
.menu-accordion li a:hover {
 	text-decoration: underline;
	color:red;
	font-weight: normal;
}
.menu-accordion h1 {
	margin:0px ;
	font-size:14px;
}
.menu-accordion h1 a {
	display: block;
	font-weight: normal;
	color:red;
	text-decoration: none;
	font-size:13	px;
	margin:0px ;
}
.menu-accordion h1 a:hover {
	text-decoration: underline;
}
.menu-accordion h1 + div {
	height: 0;
	overflow: hidden;
	-webkit-transition: height 0.5s ease-in;
}
.menu-accordion :target h1 a {
	text-decoration: none;
	font-weight: bold;
}
.menu-accordion :target h1 + div {
	height: 25%;
}

Untuk menghasilkan efek transisi, kita menggunakan fungsi -webkit-transition yang dimiliki oleh CSS3. Disini kita bisa mengatur berapa kecepatan efek transisi yang dihasilkan, sama seperti fungsi slideDown() dan slideUp() pada jQuery.

.menu-accordion h1 + div {
	height: 0;
	overflow: hidden;
	-webkit-transition: height 0.5s ease-in;
}

3. Simpan aturan css diatas dalam sebuah file dengan nama style.css dan panggil dari sebuah file html yang sudah berisi syntax html di langkah nomor 1.

Cukup gampang kan membuat sebuah menu accordion sederhana dengan CSS3…??? Memang sih, masih banyak kelemahan pada teknik ini jika dibandingkan dengan yang sudah menggunakan jQuery. Tapi setidaknya ini lebih ringan untuk di render oleh web browser. OK deh, semoga sedikit trik dari saya ini bisa bermanfaat untuk rekan-rekan.

Happy Blogging and Keep Coding

Cheerrrsss….!!!!