Kotak Penelusuran dalam Simbol
Menciptakan elemen kotak penelusuran tersembunyi dengan jQuery. Saat keadaan normal, kotak penelusuran akan tampak sebagai ikon kaca pembesar, dan saat ikon tersebut diklik, itu akan memicu kotak penelusuran di dalamnya untuk tampil:
HTML
<form class="search-form" action="/search" method="get">
<div class="input-wrapper">
<input type="text" name="q" placeholder="Search...">
<a title="Search" class="sc" href="/"></a>
</div>
</form>
CSS
.input-wrapper {
border:1px solid #B9E8FB;
width:26px;
height:26px;
background-color:white;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
overflow:hidden;
position:relative;
}
.input-wrapper input,
.input-wrapper input:focus {
border:none;
background:none;
margin:0 0;
padding:0 16px;
display:block;
width:200px;
height:26px;
font:italic bold 12px/26px Arial,Sans-Serif;
color:#1C86AF;
outline:none;
}
.input-wrapper.focus {
background-color:#EAF7FC;
border-color:#3EBFF0;
}
.input-wrapper .sc {
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGOSURBVDhPrZJPSwJRFMXPokD6BkFQyzaRQUGrKII21a5Vu9oHLVq07hNUSFSYWqOmwjSGY0aRQqsCXUQJlaXSaEZamI2mTnV7WguNMUR6cHiX98793fv+AP8+9gvd2P9cYuKZdPDQYH01/NSMPcWCYyIcVMjL4r13AT7S/A1yFZzM+J3sUZYZbByisojDEuCD4C4GGKRJHbIjj+DoxyjI2iqTmGuHq/AIt0JwFgdqAF4dcOUJvDynanDK8xCLBCHjrQF48WE3S9h+61A18C/97DiEnXRaHWBPiuDTBHtqQtXgSE1BkAm2pF8dYHuYheOJYE3kVQ3WRACOVGl/uvZLmOMxWO4JW9IFzLExcNFWcNIouNgJrGzdHCup+oKraJzUBlM4DovE7iJB5YqlmbsjbEYfsBXJwp5k8U1v7S6MEQ2MoRnob5/L3RhvMzCEFrDmb4H+ugebkSI2Qp8w3HTV9zt/u0yhIQbMwRjOw3De1xhkNTiM9eAHTFHC2mVnYxDdqRb6KwUrZ5ONASqyvgCU5N7E8iBBBAAAAABJRU5ErkJggg==') no-repeat 50% 50%;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
}
jQuery
$(function() {
$('.search-form .sc').on("click", function() {
$(this).hide()
.parent().addClass('focus')
.stop().animate({width:200}, 120, "swing")
.find('input').trigger("focus")
.on("focusout", function() {
$(this).next().show()
.parent().removeClass('focus')
.stop().animate({width:26}, 120, "swing");
});
return false;
});
});
10 Komentar
abang ichal
klo yg sekali sentuh tanpa klik bmana?
Unknown
coba bantu :) maksudnya kaya gini ya?? http://jsfiddle.net/hadhill/wRKtc/1/
kode jquerynya ganti ini
$(function() {
$('.search-form .sc').on("hover", function() {
$(this).hide()
.parent().addClass('focus')
.stop().animate({width:200}, 120, "swing")
.find('input').trigger("focus")
.on("focusout", function() {
$(this).next().show()
.parent().removeClass('focus')
.stop().animate({width:26}, 120, "swing");
});
return false;
});
});
mohon koreksinya lagi :)
Taufik Nurrohman
Meletakkan event
.hover()
di dalam JQuery.on()
setahu Saya tidak sesuai prosedur meskipun berhasil, karena event.hover()
hanyalah penggabungan antara.mouseenter()
dan.mouseleave()
Jadi, cukup tuliskan begini saja:
Unknown
cara masangnya gimana om? maklum masih nubi
Panjz mackenzie
mas yang ganteng... :D
boleh tanya ga??
maaf sebelumnya saya bertanya d tempate yang salah..
kenapa iah wktu saya pasang carousel kotak pencarian saya hilang.. padahal sebelom pasang ada bahkan sukses..hehehe saya pasang kotak pencarian yang sembunyi dr mas...
apa kah ngaruh iah?? :'(
Unknown
mirip sprti pencarian yg ada dlm grop FB.., bisa gk mas klo gk pake JQuery hny CSS sj.., soalx takut blog sy jd berat, makasih.. :)
Taufik Nurrohman
Cek salinan Saya di sini: http://codepen.io/tovic/pen/ucxon
Unknown
makasih bnyk mas..., ntr insya ALlah sy coba, :D
Anonim
Maaf mas, saya masih baru belajar blog.Mohon bantuan. Cara pasangnya gimana yah?
Giri Diwa Adam
Gan kok saya terapin di template blog saya kok nggak muncul ya tulisan sreachnya ?? mohon bantuanya