Nasıl oluşturulur: Menü simgesi

Menü simgesi nasıl oluşturulur

İlk adım - HTML eklemek:

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

İkinci adım - CSS eklemek:

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

Kendi kendine deneyin

Örnek açıklaması:

width ve height Özellikler her çubuğun genişliğini ve yüksekliğini belirtir.

Her çubuk arasındaki boşluğu oluşturmak için siyah arka plan rengi ve yukarı/alt dış boşluk ekledik.

Animasyon simgesi

CSS ve JavaScript kullanarak tıklanıldığında menü simgesini 'İptal/Sil' simgesine değiştirin:

İlk adım - HTML eklemek:

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

İkinci adım - CSS eklemek:

.container {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
/* İlk çubuğu döndür */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* İkinci çubuğu solukla */
.change .bar2 {opacity: 0;}
/* Son çubuğu döndür */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

Üçüncü adım - JavaScript eklemek:

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

Kendi kendine deneyin

Örnek açıklaması:

HTML ve CSS: Öncekiyle aynı stilleri kullandık, ancak bu sefer her <div> elementine bir konteyner elementi sardık ve her bir elemente bir sınıf adı belirledik.

Kullanıcı fareni div'ler (çizgiler) üzerine getirirken bir işaret işareti göstermek için kullanılan konteyner elementi. Tıklanıldığında, ona yeni bir sınıf adı ekleyen bir JavaScript fonksiyonu çalıştırır: İlk ve son çizgiler harf 'x' olarak deforme edilir ve döndürülür. Orta çizgiler kademeli olarak soluklaşır ve görünmez hale gelir.