lostyazilim
tr.link

Genişleyen arama kutusu hakkında

12 Mesajlar 1.978 Okunma
lstbozum
tr.link

LastHope LastHope WM Aracı Kullanıcı
  • Üyelik 16.12.2017
  • Yaş/Cinsiyet 33 / E
  • Meslek Öğrenci
  • Konum Ankara
  • Ad Soyad T** A**
  • Mesajlar 6
  • Beğeniler 0 / 0
  • Ticaret 0, (%0)
arama kutusunun içine tıklandığında sola doğru genişleyen arama kutusu yapmaya çalışıyordum.bunu kendi yaptığım arama kutusunda yaptım ama arama kutusunun içine arama simgesini yerleştiremediğimden başka yerden bulduğum kodları kullandım.
o kodlarla farkında olmadan daha güzel bir şey çıkardım ortaya :) arama kutusunun üstüne gelindiğinde veya içine tıklanıldığında(hover yüzünden tıklamaya zaman bulunmuyor gerçi ) arama kutusu sola doğru genişliyor, genişlerkende menüde bulunan başlıkların bir kısımını siliyor. ben bunu sadece input a tıklanıldığında genişlemesini istiyorum ama bir türlü yapamadım. ek olarak başlıkların bir kısmını siliyor diye belirtmiştim onları silemediğimden arama kutusunu o başlıkların önüne ekledim. arama kutusunu en sona ekleyip o başlıklarıda nasıl silebilirim ? bilgisi olan arkadaşlar yardımcı olursa sevinirim.


https://codepen.io/last_hope/pen/wppXmz ön izlemesine ve kodları buradan görebilirsiniz.
 

 

wmaraci
reklam

ugurgunes19 ugurgunes19 WM Aracı Kullanıcı
  • Üyelik 04.07.2017
  • Yaş/Cinsiyet 29 / E
  • Meslek Web Developer
  • Konum İstanbul Avrupa
  • Ad Soyad U** G**
  • Mesajlar 52
  • Beğeniler 6 / 5
  • Ticaret 0, (%0)
css'te background-image kodunu araştır. inputta css'le backgroundver olur.
 

 

başarmak istiyorsan önce kendine inan, gerisi gelir.

LastHope LastHope WM Aracı Kullanıcı
  • Üyelik 16.12.2017
  • Yaş/Cinsiyet 33 / E
  • Meslek Öğrenci
  • Konum Ankara
  • Ad Soyad T** A**
  • Mesajlar 6
  • Beğeniler 0 / 0
  • Ticaret 0, (%0)
hocam asıl bahsettiğim o değildi ama onu denemiştim. alttaki şekilde yaptım ama olmadı.
.search {
margin-top: 15px;
margin-bottom: 15px;
margin-left: 250px;
border-radius: 15px;
background: url(img/search.svg) no-repeat #fff;
}


benim asıl yapmak istediğim ise arama kutusunu sağ köşeye alıp(bunun nasıl yapılacağını biliyorum ) inputa sadece tıklandığında genişlemesini istiyorum. arama kutusunu en sağa aldığımda login register başlıklarını silmiyor bunlarında silinmesini istiyorum.
#search:hover, #search:focus {
background: #d29190;
margin-left: 20px;
width: 80%;
outline: none;
position: fixed;
color: #fff;
}

burada #search:hover, #search:focus u input:focus olarak değiştirdiğimde arama kutusunda bir değişiklik olmuyor. ben de bu işlerde daha yeni olduğumdan sorunun nerede olduğunu çözemedim.
 

 

ulas ulas C# & ASP.NET Kullanıcı
  • Üyelik 25.07.2016
  • Yaş/Cinsiyet 28 / E
  • Meslek Full Stack Developer
  • Konum Diğer
  • Ad Soyad U** K**
  • Mesajlar 1401
  • Beğeniler 404 / 404
  • Ticaret 18, (%100)
Ne istediğinizi daha sade bir dille anlatırsanız yardımcı olmak isterim
 

 

technovenue.com
wmaraci
wmaraci

ulas ulas C# & ASP.NET Kullanıcı
  • Üyelik 25.07.2016
  • Yaş/Cinsiyet 28 / E
  • Meslek Full Stack Developer
  • Konum Diğer
  • Ad Soyad U** K**
  • Mesajlar 1401
  • Beğeniler 404 / 404
  • Ticaret 18, (%100)
LastHope Sorununuzu anladığım ve araştırdığım kadarıyla JavaScript kullanmanız gerekecek. JS onclick olayını araştırın.
 

 

technovenue.com

LastHope LastHope WM Aracı Kullanıcı
  • Üyelik 16.12.2017
  • Yaş/Cinsiyet 33 / E
  • Meslek Öğrenci
  • Konum Ankara
  • Ad Soyad T** A**
  • Mesajlar 6
  • Beğeniler 0 / 0
  • Ticaret 0, (%0)
https://codepen.io/last_hope/pen/wppXmz yapmak istediğim bu ama hover özelliğiyle değil de focus özelliğiyle genişlemesini istiyorum.
https://codepen.io/last_hope/pen/NXXVMd burada yaptığım basit örnekteki gibi

javascripte gelince de onla yapılan örnekleri biliyorum, örnek olarak shiftdelete ve apple ın sitesindekiler onla yapılmış ama javascripte gerek kalmadan yapılacak bir şeymiş gibi duruyor.
 

 

27207 27207 WM Aracı Anonim Üyelik
  • Üyelik 02.01.2014
  • Yaş/Cinsiyet - /
  • Meslek
  • Konum
  • Ad Soyad ** **
  • Mesajlar 1852
  • Beğeniler 346 / 707
  • Ticaret 5, (%100)
arama formun



#aramakutusu{display:inline-block;width:200px;}
#aramakutusu input[text]:focus{width:100%; display:block;z-index:9999;}

@keyframes genisle {
0% {
opacity: 0;
transform: translateX(-200px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.genisle {
animation-name: genisle;
}


Denedim oldu ama olup olmaması sitendeki diğer elemanlara bağlı.
 

 

LastHope LastHope WM Aracı Kullanıcı
  • Üyelik 16.12.2017
  • Yaş/Cinsiyet 33 / E
  • Meslek Öğrenci
  • Konum Ankara
  • Ad Soyad T** A**
  • Mesajlar 6
  • Beğeniler 0 / 0
  • Ticaret 0, (%0)
yazdığınızın aynısını yapmaya çalıştım olmadı ama nav ın içine sadece input ekledim. animasyon özelliğini siz dive vermişsiniz ama ben input:focus a verdim. istediğim gibi bir şey ortaya çıktı ama input dışında bir yere tıklanıldığında direk animasyonsuz eski pozisyonuna geri dönüyor. input dışında bir yere tıkladığımızda arama kutusu açılmadan önceki haline aynı animasyonla geri döndürmemizin bir yolu var mıdır ? yoksa artık uğraşmayı bırakacam :)

https://codepen.io/last_hope/pen/rpdBNj buradaki gibi oluyor.
 

 

ugurgunes19 ugurgunes19 WM Aracı Kullanıcı
  • Üyelik 04.07.2017
  • Yaş/Cinsiyet 29 / E
  • Meslek Web Developer
  • Konum İstanbul Avrupa
  • Ad Soyad U** G**
  • Mesajlar 52
  • Beğeniler 6 / 5
  • Ticaret 0, (%0)
bu işi css ile yapmanız mümkün değil, bence bu tür işlere girişmeden önce js öğrenin.Tavsiyem bir kitap almanızdır. Ama size bir örnek:

https://codepen.io/nikhil/pen/aJtHk
 

 

başarmak istiyorsan önce kendine inan, gerisi gelir.

LastHope LastHope WM Aracı Kullanıcı
  • Üyelik 16.12.2017
  • Yaş/Cinsiyet 33 / E
  • Meslek Öğrenci
  • Konum Ankara
  • Ad Soyad T** A**
  • Mesajlar 6
  • Beğeniler 0 / 0
  • Ticaret 0, (%0)
o örneği biliyorum hocam da ne bileyim css le olacak gibi duruyordu. en son getirdiğim hali hoşuma gitti ama arama kutusunun içine tıklayınca açılması daha güzel olurdu.sadece input kullanınca arama kutusunun içine tıklanıldığında açılıyor açılmasına da ortaya diğerindeki gibi görüntü çıkmıyor. javascripti de öğrenmek istiyorumda internete ayrıntılı anlatılan bir kaynak bulamadım. kitap konusunda bir tavsiye verebilirseniz güzel olur.
 

 

wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al