CSS menu accordion sederhana

Masih dengan html dan css, kali ini kita akan membuat menu accordion hanya dengan html dan css saja.

Walaupun hanya menggunakan html dan css saja, namun tampilanya cukup responsive, simple dan menarik.

Sebagai bahan latihan, langsung saja kita paraktekan membuatnya, simak script dibawah.

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

<style>
body {
  background-color: #f5f5f5;
  font-family: sans-serif;
  font-size: 100%;
  color: #fff;
  padding: 0;
  margin: 0;
  line-height: 1.4;
}
h1 {
	font-size: 14px;
}
main {
	display: block;
	box-sizing: border-box;
	width: 90%;
	margin: 1em auto;
	padding: 1em 2em;
	color: #000;
	background: #dde;
	border: .07em solid rgba(0,0,0,.5);
	border-radius: .5em;
}
.expand {
	display: none;
}
.expand:target {
	display: block;
}
.title {
	color: #333;
}
.title:hover {
	color: #f00;
}
a {
	color: blue;
	text-decoration: none;
}
a:hover {
	color: green;
}
</style>

<!-- end of CSS code -->

</head>
<body>

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



<main>
  <h1>Css menu acordion sederhana</h1>
  
  <ul>
    <li><a href="#Expand1" class="title">Belajar dasar html</a>
      <ul class="expand" id="Expand1">
        <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>    
    </li>
  </ul>

  <ul>
    <li><a href="#Expand2" class="title">Belajar dasar css</a>
      <ul class="expand" id="Expand2">
        <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>    
    </li>
  </ul>

  <ul>
    <li><a href="#Expand3" class="title">Arsip script gratis</a>
      <ul class="expand" id="Expand3">
        <li><a href="https://my-id.site/tag/free-script/" target="blank">Daftar list script gratis</a></li>
      </ul>    
    </li>
  </ul>
</main>



<!-- End of body content -->

</body>
</html>

Silahkan di edit dan di sesuaikan warna serta tata letaknya sebagai bahan untuk latihan koding.

Untuk melihat hasil dan mengedit script diatas secara online, silahkan ke halaman:
Realtime HTML Editor ↗


Ok, sampai disini dulu bahasan tentang css menu accordion sederhana ini, selamat belajar, dan sukses selalu untuk Anda semua.

Mungkin Anda Menyukai