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