Accordion menu sederhana dengan CSS3 tanpa menggunakan javascript

 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

0 Shares:
Tinggalkan Balasan

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

You May Also Like