Pelajari cara membuat icon menu dengan CSS.
Cara Membuat Menu Icon
Jika Anda tidak menggunakan ikon perpustakaan, Anda dapat membuat ikon menu dasar dengan CSS:
Menu Icon:
Animasi menu Icon (click on it) :
Langkah 1) Tambah HTML:
Contoh
<div></div>
<div></div>
<div></div>Langkah 2) Tambah CSS:
misalnya Dijelaskan
The width dan height properti menentukan lebar dan tinggi masing-masing bar.
Kami telah menambahkan hitam background-color , dan bagian atas dan bawah margin digunakan untuk membuat jarak antara setiap batang.
animasi Icon
Gunakan CSS dan JavaScript untuk mengubah icon menu untuk "cancel/remove" ikon ketika diklik pada:
Langkah 1) Tambah HTML:
Contoh
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>Langkah 2) Tambah 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) Tambah JavaScript:
misalnya Dijelaskan
HTML & CSS: Kami menggunakan gaya yang sama seperti sebelumnya, hanya saja kali ini, kami membungkus elemen kontainer sekitar masing-masing <div> elemen dan kami tentukan nama kelas untuk masing-masing.
Elemen kontainer digunakan untuk menunjukkan simbol pointer ketika pengguna menggerakkan mouse ke divs (bars) . Ketika diklik, itu akan mengeksekusi fungsi JavaScript yang menambahkan nama kelas baru untuk itu, yang akan mengubah gaya masing-masing bar horisontal: pertama dan bar terakhir diubah dan diputar untuk huruf "x" . Bar di tengah memudar dan menjadi tak terlihat.