Menu accordion dengan css

Masih ingat dua menu accordion sebelumnya bukan ?, yang pertama menggunakan css sederhana, dan satunya menggunakan jQuery.

Kali ini masih dengan menu accordion, bentuknya sangat mirip dengan accordion yang menggunakan jQuery, tapi kali ini hanya menggunakan html dan css saja.

Walaupun hanya menggunakan html dan css saja, namun performa dan animasi tutup buka nya sangat menarik dan bagus.

Sangat cocok untuk bahan belajar, atau sebagai salah satu element di website Anda.

Script menu accordion dengan css

<!DOCTYPE html>
<html lang="id">
<head>
	<meta charset="utf-8">
	<title>Menu acordion dengan css</title>
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	
<!-- begin CSS code -->

<style>
body {
	background: #dde;
	font: 14px arial,sans-serif;
}
div {
	padding: 10px;
	font-size: 150%;
	text-align: center;
	text-shadow: 0 1px 0 black;
	font-weight: bold;
	color: green;
}
ul {
	list-style:none;
	margin: 0;
	padding: 0;
	width: 100%;
}
ul>li {
	position: relative;
}
ul>li p {
	margin: 0;
}
ul>li p a {
	background: #0abab5;
	color: #fff;
	display: block;
	padding: 15px;
	border-bottom: 1px solid #f5f5f5;
	text-decoration: none;
}
ul>li p a:hover, p a:focus {
	background: navy; 
	color: yellow;
}
ul>li a[href="#ab"]{
	height: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
ul>li a[href="#ab"]::before {
	border: solid #fff;
	border-width: 0 2px 2px 0;
	content:"";
	display: inline-block;
	padding: 4px;
	position: absolute;
	right: 10px;
	top: 12px;
	transition: transform .2s ease;transform:rotate(-45deg);
	z-index: 1;
}
ul>li ul {
	max-height: 0;
	overflow: hidden;
	transition: max-height .6s ease-out;
}
ul>li ul li a {
	background:#efefef;
	color: green;
	border-bottom: 1px solid #e1e1e1;
	display: block;
	text-decoration: none;
	padding: 10px;
}
ul>li ul li a:hover {
	background: #e1e1e1;
	color:red;
}
ul:target {
	max-height: 800px;
	transition:max-height 2s ease-out;
}
:target+a[href="#ab"]{height:45px;}:target+a[href="#ab"]::before{transform:rotate(45deg)}
</style>

<!-- end of CSS code -->

</head>
<body>

<!-- this content between tag <body>...</body> will be show on browser -->

<div>Menu acordion dengan css</div>

<ul>
		<li>
			<p><a href="#t1"> Belajar dasar html</a></p>
				<ul id="t1">
					<li><a href="https://my-id.site/persiapan-belajar-html/" target="blank">» Persiapan belajar</a></li>
					<li><a href="https://my-id.site/pengenalan-dasar-html/" target="blank">» Pengenalan dasar html</a></li>
					<li><a href="https://my-id.site/tutorial-dasar-html/" target="blank">» Tutorial dasar html</a></li>
					<li><a href="https://my-id.site/latihan-koding-html/" target="blank">» Latihan koding html</a></li>
				</ul>
			<a href="#ab"></a>
		</li>
		<li>
			<p><a href="#t2"> Belajar dasar css</a></p>
				<ul id="t2">
					<li><a href="https://my-id.site/persiapan-belajar-css/" target="blank">» Persiapan belajar</a></li>
					<li><a href="https://my-id.site/pengenalan-dasar-css/" target="blank">» Pengenalan dasar css</a></li>
					<li><a href="https://my-id.site/tutorial-dasar-css/" target="blank">» Tutorial dasar css</a></li>
					<li><a href="https://my-id.site/latihan-koding-css/" target="blank">» Latihan koding css</a></li>
				</ul>
			<a href="#ab"></a>
		</li>
		<li>
			<p><a href="#t4"> Belajar membuat website</a></p>
				<ul id="t4">
					<li><a href="https://my-id.site/membuat-website-pertama-dengan-html-dan-css/" target="blank">» Website dengan html dan css</a></li>
					<li><a href="https://my-id.site/membuat-website-dengan-togle-menu/" target="blank">» Website dengan togle menu</a></li>
					<li><a href="https://my-id.site/membuat-website-dengan-sliding-menu/" target="blank">» Website dengan sliding menu</a></li>
				</ul>
			<a href="#ab"></a>
		</li>
		<li>
			<p><a href="#t5"> Contoh koding script</a></p>
				<ul id="t5">
					<li><a href="https://my-id.site/tag/free-script/" target="blank">» Arsip: Free script</a></li>
				</ul>
			<a href="#ab"></a>
		</li>
		<li>
			<p><a href="#t6"> Sarana latihan</a></p>
				<ul id="t6">
					<li><a href="https://my-id.site/editor/" target="blank">» Online html editor ↗</a></li>
					<li><a href="https://my-id.site/download/" target="blank">» Offline - Download</a></li>
				</ul>
			<a href="#ab"></a>
		</li>
	</ul>

<!-- End of body content -->
  
</body>
</html>

Silahkan lihat perbandinganya dengan menu accordion yang menggunakan jQuery, Anda lebih tertarik yang mana ?

Silahkan Anda lihat dan edit kembali script diatas di halaman Realtime HTML Editor ↗, script akan otomatis ditampilkan dihalaman tersebut.

Semangat belajar dan ke sukses-an semoga selalu menyertai Anda, sampai jumpa kembali di Free Script dan Tutorial berikutnya.

Mungkin Anda Menyukai