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

  • 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.. :)

  • 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.