Cara Membuat Menu According dengan HTML, CSS, dan Javascript
Halo sobat programmer, apakabarnya hari ini. Semoga kita semua diberikan kesehatan , panjang umur, dan murah rezekinya ya. Dalam kesempatan kali ini, kita akan belajar “Cara membuat menu according dengan HTML, CSS, dan Javascript”. Untuk membuat menu according, kita dapat menggunakan HTML, CSS, dan Javascript saja.
Baca juga : Cara membuat mega menu dengan HTML, CSS, dan JS
Apa Itu menu Accordion?
Dalam desain user interface, menu akordion adalah daftar vertikal yang ditumpuk dari berbagai potongan-potongan informasi. Untuk masing-masing daftar, ada yang berlabel.Masing-masing akan tersembunyi secara default. Untuk menampilkan detail dari list dapat menggunakan action klik.
Bagaimana cara membuat menu according dengan HTML, CSS, dan JS
Pertama-tama kita buat file index.html . Kemudian ketikan kode dibawah ini.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="styles.css"></head><body>
<script src="app.js" type="text/javascript"></script></body></html>
Simpan file index.html di dalam sebuah folder, berinama folder tersebut according untuk memudahkan pembelajaran. Didalam folder according kita akan membuat tiga buah file yaiti: index.html , styles.css, dan app.js
Kemudian rubah file index.html diatas, sehingga menjadi seperti kode dibawah ini.
Jika dijalankan di browser, file index.html tersebut akan tampil seperti gambar dibawah ini.
Pada gambar diatas masih terlihat polos, karena belum menggunakan JS, dan CSS. Langkah selanjutnya kita akan membuat file css nya. Ketikan kode dibawah ini pada file styles.css .
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');
/* Sets the background color of the body to blue. Sets font to Rubik */
body {
background-color: #0A2344;
font-family: 'rubik', sans-serif;
}
/* Aligns the heading text to the center. */
h1 {
text-align: center;
}
/* Sets the width for the accordion. Sets the margin to 90px on the top and bottom and auto to the left and right */
.accordion {
width: 800px;
margin: 90px auto;
color: black;
background-color: white;
padding: 45px 45px;
}
Maka tampilan web akan berubah menjadi seperti gambar dibwah ini.
Kemudian kita tambahkan untuk mengatur posisi margin dan label pada according. Pada file styles.css tambahkan kode dibwah ini.
.accordion .container {
position: relative;
margin: 10px 10px;
}
/* Positions the labels relative to the .container. Adds padding to the top and bottom and increases font size. Also makes its cursor a pointer */
.accordion .label {
position: relative;
padding: 10px 0;
font-size: 30px;
color: black;
cursor: pointer;
}
Perbedaannya dapat dilihat pada gambar dibawah ini.
Kemudian pada label kita tambahkan tanda ‘+’ yang tandanya untuk melihat isi detailnya. Kita akan menggunakan efek ::before dan ::after selector. Kita akan menempatkan tanda ‘+’ pada sebelah kanan judul. Tambahkan kode dibawah ini pada file styles.css.
/* Positions the plus sign 5px from the right. Centers it using the transform property. */
.accordion .label::before {
content: '+';
color: black;
position: absolute;
top: 50%;
right: -5px;
font-size: 30px;
transform: translateY(-50%);
}
/* Hides the content (height: 0), decreases font size, justifies text and adds transition */
.accordion .content {
position: relative;
background: white;
height: 0;
font-size: 20px;
text-align: justify;
width: 780px;
overflow: hidden;
transition: 0.5s;
}
/* Adds a horizontal line between the contents */
.accordion hr {
width: 100;
margin-left: 0;
border: 1px solid grey;
}
Maka tampilan dari menu according kita akan berubah seperti gambar dibawah ini.
Pada tampilan web diatas masih belum bisa di klik untuk menampilkan detailnya, maka dibutuhkan Javascript. Pada file app.js ketikan kode dibawah ini.
const accordion = document.getElementsByClassName('container');
for (i=0; i<accordion.length; i++) {
accordion[i].addEventListener('click', function () {
this.classList.toggle('active')
})
}
Kemudian untuk menambahnkan efek ketika di klik tanda ‘+’ berubah menjadi ‘-’, maka pada file styles.css tambahkan kode dibawah ini.
/* Unhides the content part when active. Sets the height */
.accordion .container.active .content {
height: 150px;
}
/* Changes from plus sign to negative sign once active */
.accordion .container.active .label::before {
content: '-';
font-size: 30px;
}
Buka file index.html pada browser kesayangakn kalian, maka akan mendapatakan hasil seperti gamabar dibawah ini.
Sampai disini tutorial membuat menu according dengan HTML, CSS, dan JS. Nantikan tutorial-tutorial berikutnya. Semoga bermanfaat
No comments: