HTML ve CSS Kodları ile Menü Simgesi Oluşturmak..

ByESiNTi · 25 Tem 2021

Menü Simgesi Nasıl Oluşturulur

Bir simge yöntemi kullanmıyorsanız, HTML ve CSS ile temel bir menü simgesi oluşturabilirsiniz:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}
</style>
</head>
<body>

<p>A menu icon:</p>

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

</body>
</html>

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Menü simgesi kodunu indirebilirsiniz..

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Menü Simgesi Nasıl Yapıldığını Detaylı Anlatayım;

Adım 1) HTML'yi ekleyin:

Örnek:

Kod:

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

Adım 2) CSS'yi ekleyin:

Örnek:

Kod:

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

Örnek Açıklama

widthVe heightözelliği belirtir, her çubuğun genişliği ve yüksekliği.

Bir siyah ekledik background-colorve marginher çubuk arasında biraz mesafe oluşturmak için üst ve alt kısımlar 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:

Kod:

<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:

Kod:

.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:

Kod:

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

Örnek Açıklama

HTML & CSS: Daha öncekiyle 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.