Bagaimana untuk membuat: ikon menu

Bagaimana untuk membuat ikon menu

Tahap pertama - Menambahkan HTML:

<div></div>
<div></div>
<div></div>

Tahap kedua - Menambahkan CSS:

div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

Cuba sendiri

Pengertian contoh:

width dan height Atribut menentukan lebar dan tinggi setiap bar.

Kami menambahkan warna latar belakang hitam serta margin atas dan bawah untuk menciptakan jarak antara setiap bar.

Ikon animasi

Dengan menggunakan CSS dan JavaScript, ubah ikon menu kepada ikon 'Batal/Hapus' apabila di klik:

Tahap pertama - Menambahkan HTML:

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

Tahap kedua - Menambahkan 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 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* Keluar dengan perlahan bar kedua */
.change .bar2 {opacity: 0;}
/* Putar bar terakhir */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

Tahap ketiga - Menambahkan JavaScript:

function myFunction(x) {
  x.classList.toggle("change");
}

Cuba sendiri

Pengertian contoh:

HTML dan CSS: kami menggunakan gaya yang sama seperti yang di sebelumnya, tetapi kali ini kami membalut setiap elemen <div> dengan elemen kereta dan menentukan nama kelas untuk setiap elemen.

Elemen kereta digunakan untuk memaparkan isyarat penunjuk apabila pengguna menggesa mouse ke divs (garis) ketika ia disusun. Apabila ia di klik, ia akan melaksanakan fungsi JavaScript yang akan menambahkan nama kelas baru, yang akan mengubah gaya setiap baris tingkat: garis pertama dan terakhir akan diubah bentuk dan berputar ke huruf 'x'. Garis yang berada di tengah akan perlahan keluar dan tidak dapat dilihat.