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.
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.
Son düzenleme:
- Durum
- Üzgünüz bu konu cevaplar için kapatılmıştır...
Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)
Benzer konular
