Bagaimana Membuat: Ikon Menu

Bagaimana Membuat Ikon Menu

Tahap pertama - Tambahkan HTML:

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

Tahap kedua - Tambahkan CSS:

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

Coba sendiri

Pengertian contoh:

width dan height Atribut menentukan lebar dan tinggi setiap garis.

Kami menambahkan warna latar hitam serta marjin atas dan bawah untuk menciptakan jarak antar setiap garis.

Ikon animasi

Dengan CSS dan JavaScript, ubah ikon menu menjadi ikon 'Batal/Hapus' saat disentuh:

Tahap pertama - Tambahkan HTML:

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

Tahap kedua - 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 garis pertama */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* Menyembunyikan garis kedua */
.change .bar2 {opacity: 0;}
/* Putar garis terakhir */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

Tahap ketiga - Tambahkan JavaScript:

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

Coba sendiri

Pengertian contoh:

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

Elemen kontainer digunakan untuk menampilkan tanda penunjuk saat pengguna menempatkan mouse diatas divs (garis). Saat disentuh, ia akan melaksanakan fungsi JavaScript yang menambahkan nama kelas baru, yang akan mengubah gaya setiap garis horizontal: garis pertama dan terakhir akan berubah bentuk dan berputar menjadi huruf 'x'. Garis tengah akan perlahan mengecil dan menjadi tak terlihat.