Membuat Simple Accordion Menu Menggunakan HTML, CSS & Javascript

Jalan-jalan ke web Developer nemu sebuah artikel yang membahas tentang Simple Accordion Menu menggunakan Html, CSS dan Javascript

Baca Juga

Jalan-jalan ke web Developer nemu sebuah artikel yang membahas tentang Simple Accordion Menu menggunakan Html, CSS dan Javascript. Simpel disini karena tidak terlalu banyak menggunakan kode Javascript sehingga tidak memberikan pengaruh terhadap performa blog atau loading blog.

Begitu juga untuk penggunaannya, sangat mudah digunakan dan mudah diedit sesuai keinginan.

Kode untuk menu accordion ini bisa dikustomisasi sesuai keinginan. Mulai dari warna background, bentuk huruf, bentuk tombol, dan sebagainya. Begitu juga penggunaannya, menu accordion ini bisa digunakan di Blogger, Wordpress, ataupun platform dengan open source.

Untuk menerapkan kedalam platform yang Anda gunakan, setidaknya Anda sudah memahami penggunaan kode CSS, Html dan Script kedalam blog.

Sekilas Tentang Menu Accordion

Sebuah menu yang yang terdiri dari beberapa elemen didalamnya yang akan muncul jika elemen tersebut diberikan perlakukan khusus. Misalnya dengan cara di Klik atau di Sorot. Sedangkan untuk elemen itu sendiri berisi beberapa objek seperti teks, gambar, atau video.

Dengan menggunakan menu accordion ini akan mengurangi penggunakan halaman konten. Karena dengan menu ini, semua konten, khususnya konten-konten yang menghabiskan banyak halaman akan disembunyikan dan akan muncul dengan perlakuan khusus.

Seperti apa contoh menu accordion? Sebelum memberikan contoh tampilannya, saya sudah menyiapkan kode CSS, Html dan Javascript yang harus digunakan. Kode ini bukan saya yang bikin tapi dari blogger tetangga yaitu India, Shantanu Jana. Silahkan gunakan kode dibawah ini untuk membuat simple accordion menu di blog Anda.

Kode CSS

Salin kode CSS dibawah ini kedalam kode editing di template atau tema blog yang Anda gunakan. Untuk blogger, buka menu TEMA >> Klik icon pada menu SESUAIKAN >> Klik Edit HTML

Jika menggunakan Wordpress atau platform lainnya, pastikan thema yang digunakan sudah support pengeditan untuk menambahkan kode CSS dan Javascript. Atau jika cara manual ini terlalu sulit, lebih baik gunakan plugin menu accordion saja.

.accordionWrapper{
  padding:30px;
  background:#fff;
  float:left;
  width:500px;
  border-radius: 5px;
  box-sizing:border-box;
  margin:10%;
  box-shadow: 0 1.5em 85px 0 rgba(0, 0, 0, 0.2);}
.accordionList{
  float:left;
  display:block;
  width:100%;
  box-sizing: border-box;
  font-family:'Open-sans',Arial,sans-serif;}
.accordionTitle{
  cursor:pointer;
  margin:0px 0px 10px 0px;
  padding:10px;
  font-size: 22px;
  font-weight: 400;
  background:#2980b9;
  color:#fff;
  width:100%;
  border-radius: 3px;
  box-sizing: border-box;}
.accordionTitle span{
  float: right;
  font-size: 25px;}
.close .accordionListContent{
  height:0px;
  transition:height 1s ease-out;
  transform: scaleY(0);
  float:left;
  display:block;}
.open .accordionListContent{
  padding: 20px;
  background-color: #f0f1f1;
  border: 1px solid #ddd;
  width: 100%;
  margin: 0px 0px 10px 0px;
  display:block;
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.4s ease;
  box-sizing: border-box;}
.open .accordionTitle{
  margin:0px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  background-color: #073e63;
  color: #cdd7d8;}

Kode HTML

Salin kode HTML dibawah ini dan pastekan kedalam halaman yang Anda inginkan. Kode ini bisa dipasang dimana saja didalam blog, yang terpenting tidak memberlakukan tag kondisional pada kode halaman yang digunakan.

<div class="accordionList open">
   <h2 class="accordionTitle">Judul Pertama <span>+</span></h2>

    <div class="accordionListContent">
       <p>Ganti teks atau keterangan disini sesuai dengan judul deskripsi.</p>
    </div>

</div>

<div class="accordionList close">
   <h2 class="accordionTitle">Judul Kedua  <span>+</span></h2>

    <div class="accordionListContent">
       <p>Ganti teks atau keterangan disini sesuai dengan judul deskripsi.</p>
    </div>
</div>

<div class="accordionList close">
   <h2 class="accordionTitle">Judul Ketiga <span>+</span></h2>

    <div class="accordionListContent">
       <p>Ganti teks atau keterangan disini sesuai dengan judul deskripsi.</p>
    </div>
</div>

Kode JavaScript

Untuk pengguna Blogger, salin kode script dibawah ini diatas end tag kode body blog atau sebelum kode </body>. Untuk pengguna Wordpress, sesuai dengan penggunaan tema blog Anda.

var accItem = document.getElementsByClassName('accordionList');
    var accHD = document.getElementsByClassName('accordionTitle');

for (i = 0; i < accHD.length; i++) {
        accHD[i].addEventListener('click', toggleItem, false);
    }
    function toggleItem() {
        var itemClass = this.parentNode.className;
        for (i = 0; i < accItem.length; i++) {
            accItem[i].className = 'accordionList close';
        }
        if (itemClass == 'accordionList close') {
            this.parentNode.className = 'accordionList open';
        }
    }

DEMO

See the Pen Simple Accordion Menu Menggunakan HTML, CSS & Javascript by Sahroni (@digitalpoin) on CodePen.

Dengan menggunakan beberapa tampilan accordion menu untuk beberappa konten, akan membuat konten tersebut menjadi lebih mudah dipahami. Dan tidak akan menggunakan banyak halaman untuk setiap kontennya. Jika ingin membuat simple accordion menu diatas, gunakan dan salin kode diatas seperti yang telah dijelaskan caranya.