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.
Genişleyen arama kutusu hakkında |
12 Mesajlar | 1.970 Okunma | ||
- Ü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)
- Ü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.
- Ü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ı.
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.
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.
.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.
- Ü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
- Ü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
- Ü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.
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.
- Ü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ı.
- Ü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.
https://codepen.io/last_hope/pen/rpdBNj buradaki gibi oluyor.
- Ü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
https://codepen.io/nikhil/pen/aJtHk
başarmak istiyorsan önce kendine inan, gerisi gelir.
- Ü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.
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)