Sonuç demosu Demo:
Html kodları ile başlayalım
Öncelikle Html5 ‘in nimetlerini kullanarak bir arama formu oluşturalım.Kodlarımız:
Css ile kapanıp/açılma özelliği
Başlıkta belirttiğimiz gibi menümüz kapalı bir halde duracak bastığımızda genişleyerek açılacak.Bunu yapabilmemiz için Css’deki :focus özelliğini kulllanacağız.Öncelikle focus özelliği nedir tanımlayayım.
Focus özelliği, atanan div’e tıklandığında ne yapacağını söylemekŞimdi kodlarımızı veriyorum. Önce arama kutumuzun başlangıç değerlerini verelim.
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: helvetica; /* Yazı tipi */
font-size: 100%; /* Font boyutu */
}Ardından webkit tarayıcılarının verdiği başlangıç Css değerlerini (ara ve kapat butonlarını) sıfırlayalım.
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}Arama kutumuzun başlangıç genişliğini verelim.Ben 30px olarak belirledim.
input[type=search] {
width: 30px;
}Tıkladığımızda genişleme özelliğini yapalım.Yukarıda belirttiğim gibi focus özelliğini kullanacağız.
input[type=search]:focus {
width: 130px;
}Bu kodlar ile genişliği 30px olan bir arama kutumuzu tıklayınca 130px genişliğine getirdik.Fakat görüntümüz bu şekilde hiç hoş olmadı. Css kodlarımızla biraz harmanlarsak elimize güzel bir görüntü geçecek.Şu anda elde ettiğimiz görüntü şu şekilde:
Görünümü güzelleştirelim
İşin içine biraz heyecan katalım. Elde ettiğimiz sonuç bizim istediğimiz aç/kapa işlevini yerine getiriyor fakat görsellik yok.Aşağıda verdiğim kodlar ile bu sorunu da halletmiş olacağız. Hepsini teker teker açıklamak yerine,yanına ufak açıklamalar koydum.
Siz bunun yerine değişik şekilde Css kodlarıda yazabilirsiniz.Bu sadece bir örnek.
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: helvetica;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed; /*Arkaplan*/
border: solid 3px #ccc; /* Kenarlık */
border-radius:3px; /*köşe yumuşatma*/
padding: 9px 10px 9px 10px;
width: 30px; /*Başlangıçtaki genişlik */
-webkit-transition: all .5s; /*Animasyon */
-moz-transition: all .5s;/*Animasyon */
transition: all .5s; /* Animasyon */
}
input[type=search]:focus {
width: 130px; /* Tıklandığında genişlik */
background-color: #f9f9f9; /* tıklandığında arkaplan*/
border-color: #22c8e6; /*tıklandığında kenarlık rengi*/
}
input:-moz-placeholder {
color: #999;}
input::-webkit-input-placeholder { color: #999; }Sonuç:
Bu dersimizde bu kadar.Bu ders sayesinde tıkladığımızda genişleyen bir arama kutusu oluşturmayı öğrendik. Yardımcı olabilmek umudu ile…
Kaynak:Hibestil.com
http://www.hibestil.com/acilabilir-arama-kutusu-yapimi/
