Cara - Ikon Menu
Pelajari cara membuat ikon menu dengan CSS.
Cara Membuat Ikon Menu
Jika Anda tidak menggunakan pustaka ikon, Anda dapat membuat ikon menu dasar dengan CSS:
Ikon Menu:
Ikon Menu Animasi (klik di atasnya):
Langkah 1) Tambahkan HTML:
Contoh
<div></div>
<div></div>
<div></div>
Langkah 2) Tambahkan CSS:
Contoh
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Contoh Dijelaskan
Properti width
and height
menentukan lebar dan tinggi setiap batang.
Kami telah menambahkan hitam background-color
, dan bagian atas dan bawah margin
digunakan untuk membuat jarak antara setiap batang.
Ikon Animasi
Gunakan CSS dan JavaScript untuk mengubah ikon menu menjadi ikon "batal/hapus" saat diklik:
Langkah 1) Tambahkan HTML:
Contoh
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>
Langkah 2) Tambahkan CSS:
Contoh
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate
first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the
second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform:
rotate(45deg) translate(-8px, -8px) ;
transform:
rotate(45deg) translate(-8px, -8px) ;
}
Langkah 3) Tambahkan JavaScript:
Contoh
function myFunction(x) {
x.classList.toggle("change");
}
Contoh Dijelaskan
HTML & CSS: Kami menggunakan gaya yang sama seperti sebelumnya, hanya kali ini, kami membungkus elemen wadah di sekitar setiap elemen <div> dan kami menentukan nama kelas untuk masing-masing.
Elemen container digunakan untuk menunjukkan simbol pointer ketika pengguna menggerakkan mouse di atas divs (bar). Ketika diklik, itu akan menjalankan fungsi JavaScript yang menambahkan nama kelas baru ke dalamnya, yang akan mengubah gaya setiap bilah horizontal: bilah pertama dan terakhir diubah dan diputar ke huruf "x". Bilah di tengah memudar dan menjadi tidak terlihat.