Nasıl Yapılır - Menü Simgesi
CSS ile bir menü simgesinin nasıl oluşturulacağını öğrenin.
Menü Simgesi Nasıl Oluşturulur
Bir simge kitaplığı kullanmıyorsanız, CSS ile temel bir menü simgesi oluşturabilirsiniz:
Menü Simgesi:
Hareketli Menü Simgesi (üzerine tıklayın):
Adım 1) HTML'yi ekleyin:
Örnek
<div></div>
<div></div>
<div></div>
Adım 2) CSS'yi ekleyin:
Örnek
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Örnek Açıklama
ve özelliği width
, height
her çubuğun genişliğini ve yüksekliğini belirtir.
Bir siyah ekledik background-color
ve her çubuk arasında biraz mesafe oluşturmak için üst ve alt kısımlar margin
kullanıldı.
Hareketli Simge
Tıklandığında menü simgesini "iptal/kaldır" simgesine değiştirmek için CSS ve JavaScript'i kullanın:
Adım 1) HTML'yi ekleyin:
Örnek
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>
Adım 2) CSS'yi ekleyin:
Örnek
.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) ;
}
Adım 3) JavaScript'i ekleyin:
Örnek
function myFunction(x) {
x.classList.toggle("change");
}
Örnek Açıklama
HTML & CSS: Daha önce olduğu gibi aynı stilleri kullanıyoruz, ancak bu sefer her <div> öğesinin etrafına bir kapsayıcı öğesi sarıyoruz ve her biri için bir sınıf adı belirliyoruz.
Konteyner elemanı, kullanıcı fareyi div'ler (çubuklar) üzerinde hareket ettirdiğinde bir işaretçi sembolü göstermek için kullanılır. Üzerine tıklandığında, her yatay çubuğun stillerini değiştirecek yeni bir sınıf adı ekleyen bir JavaScript işlevi yürütür: ilk ve son çubuk dönüştürülür ve "x" harfine döndürülür. Ortadaki çubuk kaybolur ve görünmez olur.