Bagaimana cara membuat ikon menu dengan CSS, pada bab berikut ini anda akan mempelajari caranya.
Section Artikel
Cara Membuat Menu Icon
Jika Anda tidak menggunakan libray icon, Anda dapat membuat menu icon dasar dengan menggunakan CSS.
Contoh :
Menu Icon
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div { width: 35px; height: 5px; background-color: black; margin: 6px 0; } </style> </head> <body> <p>Menu icon:</p> <div></div> <div></div> <div></div> </body> </html>
Menu Icon Animasi (klik di atasnya):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
</style>
</head>
<body>
<p>Klik pada Ikon Menu untuk mengubahnya menjadi "X":</p>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</body>
</html>
Langkah 1) Tambahkan HTML
<div></div> <div></div> <div></div>
Langkah 2) Tambahkan CSS
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
</style>
</head>
<body>
<p>Menu icon:</p>
<div></div>
<div></div>
<div></div>
</body>
</html>
Penjelasan Contoh
Properti width dan height menentukan lebar dan tinggi setiap bar.
Pada contoh diatas kami telah menambahkan warna background hitam, dan margin atas dan bawah digunakan untuk membuat jarak antara setiap bar.
Ikon Animasi
Gunakan CSS dan JavaScript untuk mengubah ikon menu menjadi ikon “cancel/ remove” saat diklik:
Langkah 1) Tambahkan HTML
<div class="container" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div>
Langkah 2) Tambahkan CSS
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Putar bar pertama */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Pudarkan bar kedua */
.change .bar2 {
opacity: 0;
}
/* Putar bar terakhir */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}Langkah 3) Tambahkan JavaScript
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
</style>
</head>
<body>
<p>Klik pada Ikon Menu untuk mengubahnya menjadi "X":</p>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</body>
</html>
Penjelasan Contoh
HTML & CSS: Contoh diatas menggunakan style yang sama seperti sebelumnya, hanya kali ini, kami membungkus elemen container di sekitar setiap elemen dan kami menetapkan nama kelas untuk masing-masing elemen.
Elemen container digunakan untuk menunjukkan simbol penunjuk ketika pengguna menggerakkan mouse ke atas div (bar). Saat diklik, maka akan menjalankan fungsi JavaScript yang menambahkan nama kelas baru ke dalamnya, yang akan mengubah style setiap bar horizontal: bar pertama dan terakhir diubah dan diputar menjadi huruf “x”. Bar di tengah memudar dan menjadi tidak terlihat.
