Google - Yandex form input kodu
Merhabalar,
Google veya Yandex mobil'de form arama kutucuğuna tıklandığında başka bir sayfanın açıldığı, en üstte arama yazıldığı ve allta ise arama önerileri çıktığı gözüküyor. Ancak benim aslında burada veritabaanı mysql ile'de işim yok. Benim buradaki amacım sadece tıklandığında sadece google ve yandexdeki gibi arama yazma yerine gelmesini istiyorum. Zaten bunu başarırsam css ile harikalar yaratıcam. Ancak bir türlü çözemedim. @tayfurerbilen hocamın da aslında bu dersi çekmesini çok isterim. Alışveriş siteleri ve benzeri sitelerde artık kullanılması sade şık ve kafa karışıklığını gideriyor kısacası. Prototürk kullanıcılardan yardım istiyorum. Biraz ayrıntılı ve örnek kodlama atarsanız gerçeten çok sevinirim. Anlamadıysanız kendiniz mobilde deneyimleyebilir ve dediğimi anlayabilirsiniz. Yeniden teşekkürler.
İyi kodlamalar :)
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (8)
Heralde demek istediğin Bu;
Mobil Görünüm kodunu eklersen daha net görürsün
mobilden bakacaksan. Çünkü Genellikle mobilde oluyor heralde
bu tasarım.
Display ile yaparsan Daha doğru olur sanırım.
Bende yeni öğrenmdiğim için genellikle kural dışı oluyor yaptıklarım.
<h1>GOOGLE</h1>
<h4>powered by <b>LEDENAV</b></h4>
<div>
<input type="search" placeholder=" yazmayı dene (ledenav)" >
<div id="iki" > </div>
</div>
<style type="text/css">
*{
margin:0;
padding:0;
}
body {
background-color:lightGray;
}
h1,h4 {
text-align:center;
letter-spacing:9px;
color:blue;
}
b{
color:red;
}
input {
margin:2px 10px;
height:30px;
width:95%;
border:1px solid gray;
border-radius:5px;
outline:none;
}
input:focus {
position:absolute;
top:0;
z-index:1;
border:none;
border-radius:0;
border-bottom:1px solid gray;
}
#iki{
width:100%;
height:0;
background-color:white;
}
input:focus+#iki{
position:absolute;
top:0;
height:100%;
}
</style>
arama inputuna tiklandigi vakit veya focus oldugu vakit tam ekran olarak en ust de arama inputu asagida ise oneriler geliyor.
iki tane ekranin var.
birinci ekrani display none yapip ikinci ekrani gostereceksin.
arama inputlari da her ikisi de ayni modele bagli olacak ikisi de ayni veriyi tutacak.
bir tane input yapip onu yukariya almakla ile ugrasmayin bence.
<input type="text" name="ara" id="ara" />
<script>
$("#ara").focus(function(){
$("html, body").animate({
scrollTop:320
},600);
});
</script>
jquery kütüphanesini dahil etmeyi unutmayın.
kısaca focus kullanılarak yapılabiliyor. Ben arama kutusu focus olduğunda animasyonlu bir sekilde yukarıya kaydırıyorum sadece, amacım kutuya yazmaya başlanınca uzayan verinin görülebilir olmasını kılmak.
şuradan test edebilirsin.
https://kitapbu.net