Mecha versi 2.6.4 sudah dirilis!

Kotak Penelusuran dalam Simbol

Tabel Konten
  1. HTML 
  2. CSS 
  3. jQuery 
  4. Demo 
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;
    });
});

Demo 

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:

$(function() {
$('.search-form .sc').on("mouseenter", 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;
});
});​

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?? :'(

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

Komentar telah ditutup.