Membuat Menu Accordion menggunakan HTML dan CSS (Tanpa Javascript)
Dandi Wiratsangka 16 Desember 2016
Halo Coders! sesuai judul artikel, kali ini kita akan membuat sebuah menu accordion dengan menggunakan HTML dan CSS murni tanpa menggunakan Javascript sedikitpun. Mungkin banyak orang bertanya, kenapa harus tanpa Javascript?
Pada kasus tertentu, suatu halaman web akan dibuka dengan menggunakan browser yang tidak mendukung javascipt, atau mungkin user menonaktifkan fitur javascript tersebut, sehingga menu accordion yang menggunakan javascript tidak bisa dibuka oleh user. Alasan lain mengapa kita tidak menggunakan javascript adalah karena javascript akan dimuat oleh browser dan membuat halaman web kita akan sedikit lebih lama dimuat. Lalu, bagaimana kita membuat sebuah menu accordion tanpa menggunakan javascript?
Disini kita akan memanfaatkan elemen radio input pada HTML dan properti-properti yang ada pada CSS. Jadi sistemnya ketika radio button pertama dipilih (checked), maka menu accordion pertama akan terbuka. Dan ketika radio button kedua dipilih, maka menu kedua akan terbuka, dan menu pertama akan tertutup, dan seterusnya. Untuk dapat mengikuti tutorial ini, minimal anda harus mengerti dasar HTML dan CSS terlebih dahulu. Untuk mendapatkan gambaran awal tentang menu accordion ini, silahkan buka link demo berikut.
Langkah yang harus dilakukan adalah:HTML
1. Buatlah sebuah kerangka file html seperti biasa- Membuat sebuah wadah dengan elemen div dan class acc-kontainer
<div class="acc-kontainer"></div>
- Membuat sebuah menu didalam wadah tadi
<div class="acc-kontainer"> <!--Menu 1--> <div> <input type="radio" name="acc" id="acc1" checked> <label for="acc1"><i class="fa fa-map-marker"></i> My name?</label> <div class="acc-body"> Hi, You can call me Dandi. </div> </div> </div>
Penjelasan:
- sebuah menu diwadahi lagi dengan sebuah div elemen tanpa class, yang fungsinya untuk memisahkan setiap menu agar ketika radio button dipilih, tidak mempengaruhi menu dibawahnya.
- name="acc" mendeklarasikan input tersebut terdapat dalam satu golongan dengan nama "acc", yang bilamana suatu radio button dipilih (checked), radio button lainnya akan batal dipilih (unchecked).
- id="acc1" berfungsi sebagai penunjuk untuk attribut for pada label. ingat setiap menu harus memiliki id yang berbeda.
- div dengan class acc-body adalah wadah dari isi sebuah menu.
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> </head> <body> <h1>Pure HTML+CSS Accordion (Without Javascript)</h1> <div class="acc-kontainer"> <div> <input type="radio" name="acc" id="acc1"> <label for="acc1"><i class="fa fa-map-marker"></i> My name?</label> <div class="acc-body"> Hi, You can call me Dandi. </div> </div> <div> <input type="radio" name="acc" id="acc2"> <label for="acc2"><i class="fa fa-heart"></i> What am I interesting for?</label> <div class="acc-body"> All the thing about Technology! Informatic technology especially. </div> </div> <div> <input type="radio" name="acc" id="acc3"> <label for="acc3"><i class="fa fa-music"></i> What is my hobby?</label> <div class="acc-body"> i love music <i class="fa fa-headphones"></i>, watching movie <i class="fa fa-film"></i>, Designing maybe <i class="fa fa-code"></i> </div> </div> </div> </body> </html>NB: Jika anda ingin pada awal halaman dimuat salah satu menu sudah terbuka, anda harus menambahkan attribut "checked" pada salah satu menu, seperti contoh dibawah ini:
<input type="radio" name="acc" id="acc1" checked>
CSS
1. Menghilangkan radio button karena kita akan menggantinya dengan labelNB: label disini jika kita klik maka akan membuat radio button yang dituju menjadi checked
.acc-kontainer input{
display: none;
}
- Membuat style untuk label
.acc-kontainer label {
cursor: pointer;
background-color: rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: block;
padding: 15px;
width: 100%;
color: #fff;
font-weight: 400;
box-sizing: border-box;
z-index: 100;
}
- Membuat style untuk isi dari menu
.acc-kontainer .acc-body {
width: 98%;
margin: 0 auto;
font-size: 16px;
height: 0;//#
color: rgba(0, 0, 0, 0);//#
background-color: rgba(255, 255, 255, 0.2);
line-height: 28px;
padding: 0 20px;//#
box-sizing: border-box;
transition: 0.5s;
}
Penjelasan: yang perlu diperhatikan adalah yang diberi tanda //# yang merupakan inisiasi awal ketika menu belum terbuka
- Membuat style ketika sebuah menu terbuka (radio button terpilih/ is checked)
.acc-kontainer input:checked~.acc-body {
height: auto; //#
color: #fff; //#
padding: 20px; //#
transition: 0.5s;
}
Penjelasan: yang perlu diperhatikan adalah yang diberi tanda //#
- Memperindah keseluruhan menu accordion, sehingga css menjadi tampak seperti dibawah:
body {
background-color:#c15236;
font-family:'Arial';
padding:2em 6em;
}
h1{ color:#fff; text-align:center; }
/--------Accordion-------/
.acc-kontainer { width: 100%; margin: auto; }
.acc-kontainer .acc-body { width: 98%; width: calc(100% - 20px); margin: 0 auto; font-size: 16px; height: 0; color: rgba(0, 0, 0, 0);; background-color: rgba(255, 255, 255, 0.2); line-height: 28px; padding: 0 20px; box-sizing: border-box; transition: 0.5s; }
.acc-kontainer label { cursor: pointer; background-color: rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: block; padding: 15px; width: 100%; color: #fff; font-weight: 400; box-sizing: border-box; z-index: 100; }
.acc-kontainer input{ display: none; }
.acc-kontainer label:before { font-family: 'FontAwesome'; content: '\f067'; font-weight: bolder; float: right; }
.acc-kontainer input:checked+label { background-color: rgba(255, 255, 255, 0.15); }
.acc-kontainer input:checked+label:before { font-family: 'FontAwesome'; content: '\f00d'; transition: 0.5s; }
.acc-kontainer input:checked~.acc-body { height: auto; color: #fff; padding: 20px; transition: 0.5s; }
Jika kiranya ada yang kurang paham bisa ditanyakan pada kolom komentar. Terimakasih.