Membuat Accordion Menu dengan CSS
Membuat Accordion Menu dengan CSS - Accordion menu merupakan suatu efek memunculkan suatu konten didalam elemen dengan melakukan klik terhadap elemen itu sendiri. Untuk membuat accordion menu kita bisa membuat dengan framework bootstrap ataupun dengan menggunakan plugin - plugin dari jQuery. Tentu kita pun bisa membuat custom accordion menu dengan CSS. Nah, buat kalian yang ingin mempelajari bagaimana Membuat Accordion Menu dengan CSS. Berikut akan saya bagikan tutorial dan sekaligus mempraktekan bagaimana cara membuatnya. Baiklah, langsung saja kita mulai praktek membuat accordion menu.
Langkah 1 : Membuat Accordion Menu dengan CSS
Kita mulai dengan membuat struktur awal untuk accordion menu dengan mengetikan sintak HTML berikut, kemudian simpan file dengan nama index.html
<nav class="accordion arrows">
<header class="box">
<label for="acc-close" class="box-title">Accordion menu</label>
</header>
<input type="radio" name="accordion" id="cb1" />
<section class="box">
<label class="box-title" for="cb1">Item One</label>
<label class="box-close" for="acc-close"></label>
<div class="box-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
</section>
<input type="radio" name="accordion" id="cb2" />
<section class="box">
<label class="box-title" for="cb2">Item Two</label>
<label class="box-close" for="acc-close"></label>
<div class="box-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
</section>
<input type="radio" name="accordion" id="cb3" />
<section class="box">
<label class="box-title" for="cb3">Item Three</label>
<label class="box-close" for="acc-close"></label>
<div class="box-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
</section>
<input type="radio" name="accordion" id="acc-close" />
</nav>
</body>
Langkah 2 : Membuat Accordion Menu dengan CSS
Setelah membuat struktur dan konten seperti diatas, selanjutnya kita akan membuat efek accordion dengan menggunakan sintak CSS seperti berikut.
display: flex;
background: #E7E8E3;
font-family: 'Roboto', sans-serif;
}
.accordion {
margin: auto;
width: 400px;
}
.accordion input {
display: none;
}
.box {
position: relative;
background: white;
height: 64px;
transition: all .15s ease-in-out;
}
.box::before {
content: '';
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
}
header.box {
background: #C60751;
z-index: 100;
cursor: initial;
}
header .box-title {
font-size: 16pt;
color: white;
cursor: initial;
}
.box-title {
height: 64px;
line-height: 64px;
padding: 0 20px;
display: inline-block;
cursor: pointer;
}
.box-content {
width: calc(100% - 40px);
padding: 30px 20px;
font-size: 11pt;
color: rgba(0,0,0,.54);
display: none;
}
.box-close {
position: absolute;
height: 64px;
width: 100%;
top: 0;
left: 0;
cursor: pointer;
display: none;
}
input:checked + .box {
height: auto;
margin: 16px 0;
}
input:checked + .box .box-title {
border-bottom: 1px solid rgba(0,0,0,.18);
}
input:checked + .box .box-content,
input:checked + .box .box-close {
display: inline-block;
}
.arrows section .box-title {
padding-left: 44px;
width: calc(100% - 64px);
}
.arrows section .box-title:before {
position: absolute;
display: block;
content: '\203a';
font-size: 18pt;
left: 20px;
top: -2px;
transition: transform .15s ease-in-out;
color: rgba(0,0,0,.54);
}
input:checked + section.box .box-title:before {
transform: rotate(90deg);
}
Setelah semua sintak telah diketikan, silahkan simpan kembali filenya kemudian buka pada browser masing - masing dan lihat hasilnya, maka akan terlihat seperti gambar berikut. Jika kalian klik item maka akan muncul konten pada elemen itu. Nah, seperti itulah bentuk daripada accordion menu.
Baik, cukup sekian tutorial mengenai Membuat Accordion Menu dengan CSS, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
