Merhaba TS Ahalisi. CSS dosyasına bu satırların etki ettiği elementi sadece mobilde gösterip masaüstünde gizlemek istiyorum. Nasıl yapabilirim?
Kodlar:
/* HAMBURGER */
.hamburger {
position: relative;
cursor: pointer;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
transition-duration: 500ms;
-webkit-transition-duration: 500ms;
transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.hamburger span {
display: block;
height: 2px;
width: 30px;
background: #fff;
opacity: 1;
position: absolute;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.hamburger span:nth-child(1) {
top: 0;
}
.hamburger span:nth-child(2) {
top: 9px;
}
.hamburger span:nth-child(3) {
width: 10px;
top: 19px;
}
.hamburger span:nth-child(4) {
width: 6px;
top: 19px;
left: 15px;
}
.hamburger.open {
margin: 0;
}
.hamburger.open span:nth-child(1) {
top: 9px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.hamburger.open span:nth-child(2) {
opacity: 0;
left: 20px;
}
.hamburger.open span:nth-child(3) {
width: 30px;
top: 9px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.hamburger.open span:nth-child(4) {
opacity: 0;
left: 20px;
}
.hamburger:hover span:nth-child(4) {
width: 20px;
left: 10px;
}
media querylerine bir göz atın
Bu bir görsel değil, yine de işe yarar mı?
@armv7 görsellikle alakası yok ismine çok takılma 🙂 media queryleri ile yapılıyor bu iş genelde. Örnekleri incelersen oralarda da kullanımlar görürsün muhtemelen.
@ozcanm Şöyle bir kod buldum ama bu kodun neresine ekleyeceğimi de bilmiyorum 😂 Siz biliyor musunuz?
kod:
@media screen and (min-width: 0px) and (max-width: 400px) {
#my-content { display: block; } /* show it on small screens */
}
@armv7 bu örneğe göre çözünürlük 0 ile 400px arasındaysa içerisindeki css kuralları çalıştırılır. siz hamburger class'ının display özelliğini none yapıp bu media querysi içerisinde .hamburger { display: block; } şeklinde verdiğinizde hamburger classını alan element 400px den büyük ekranlarda görünmeyecektir
Valla şahane olur, terimler çok yabancı geliyor bana. Bu kodu sizin verdiğinizle değiştireceğim hale mi getireceksiniz? Öyle olursa yapabilirim ancak çünkü 😂
@media screen and (min-width: 600px) {
div.example {
display: none;
}
}
div.example kısmına ilgili class'ı yazacaksın.
CSS le yap. JavaScript den daha performanslı.
Böyle olursa masaüstünde responsive tasarımda sorun olur. Bunun için sürekli mobile geçti mi geçmedi mi diye viewport size değişikliğini kontrol ettirmek gerekiyor. Kulağı öbür ucundan tutmak anlamına geliyor. User agent yerine düz CSS ile çözünürlüğe göre tanımlama yapmak daha mantıklı.