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

<body>
    <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.

body {
    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.

Membuat Accordion Menu dengan CSS
Baik, cukup sekian tutorial mengenai Membuat Accordion Menu dengan CSS, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)

28 Maret 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat