Selamat Datang

Tutorial Cara Membuat Form Pencarian Tersembunyi Dengan Jquery

Setiap website dinamis membutuhkan form pencarian, form pencarian ini sangat berguna untuk mempermudah pengunjung dalam menemukan tulisan yang dia inginkan dengan cepat.

Setiap website memiliki desain yang unik dan berbeda-beda, ada kalanya seorang desainer kebingungan dimana harus menempatkan form pencarian tersebut karena minimnya space atau tidak adanya tempat yang cocok untuk meletakan field untuk mengetik kata kunci. Sehingga sekarang ini sangat nge-trend form pencarian yang disembunyikan dan hanya menampilkan icon pencarian(kaca pembesar) saja. Ketika icon itu di klik baru lah form nya muncul dan pengunjung bisa mengetikan kata kunci disitu.

expanding dropdown form search

Pada tutorial kali ini kita akan mencoba untuk membuat model form pencarian yang seperti itu.

Membuat Struktur HTML

Pertama kita akan membuat struktur HTML nya terlebih dahulu, disini saya hanya akan menuliskan bagian header nya saja agar anda tidak bingung, karena bagian-bagian lain hanya pelengkap saja.

	<header>
		
		<div class="logo">
			<h1>TWD</h1>
			<p>Web Design & Development Indonesia</p>
		</div>

		<div class="top-menu">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#" id="searchtoggl"><i class="fa fa-search fa-lg"></i></a></li>
			</ul>
		</div>

	</header>

	<div id="searchbar" class="clearfix"> 
		<form id="searchform" method="get" action="searchpage.php"> 
			<button type="submit" id="searchsubmit" class="fa fa-search fa-4x"></button> 
			<input type="search" name="s" id="s" placeholder="Keywords..." autocomplete="off"> 
		</form> 
	</div>
Menu dan Form

Disitu terlihat kalau kita menggunakan class fa fa-search fa-4x untuk menampilkan icon pencarian, yang dibungkus dengan sebuah div dengan ID #searchtoggl. Agar icon tersebut muncul kita terlebih dahulu menyertakan kode css dari font awesome di bagian head website. Anda bisa membaca penggunaan font awesome ini secara singkat di artikel Tulisan Berbentuk Icon Untuk Desain Website.

Mempercantik Dengan CSS

Agar tampilan terlihat menarik kita tentunya membutuhkan script css, disini kita hanya akan menyoroti potongan kode dari form pencarian dan menu saja, karena pada bagian itulah yang paling terpenting untuk membentuk tampilan form pencarian tersembunyi tersebut.

header{
	padding: 20px 30px;
	overflow: hidden;
	border-bottom: 1px solid #ddd;
}

	.logo{
		float: left;
		width: 300px;
	}

	.top-menu{
		float: right;
		margin-top: 30px;
	}

		.top-menu ul{
			list-style-type: none;
		}

		.top-menu ul li{
			display: inline-block;
		}

		.top-menu ul li a{
			display: block;
			padding: 10px;
			font-size: 16px;
			color: #002633;
		}
		.top-menu ul li a:hover{
			color: #B16B67;
		}



		#searchbar {
			display:none;
			float:left;
			width:100%;
			height:62px;
			padding-left:25px;
			padding-right:10px;
			z-index:9999;
			background:#f4f4f4;
		}

		#s {
			display:block;
			width:88%;
			border:0;
			outline:none;
			height:60px;
			line-height:60px;
			font-size:2em;
			font-weight:700;
			color:#676767;
			padding:0;
			background: #f4f4f4;
		}

		#searchsubmit {
			display:block;
			float:right;
			margin-top:6px;
			background:none;
			color:#717171;
			border:0;
			outline:none;
			cursor:pointer;
		}
Mengatur Header dan Form Pencarian

Terlihat disitu kita menggunakan property display:none pada ID #searchbar agar form pencarian hilang atau tidak ditampilkan saat website pertama kali dijalankan. Form akan muncul hanya ketika icon pencarian di klik, dan untuk memunculkan itu kita butuh Jquery untuk memproses trigger even on click, jadi ketika icon di klik jquery akan merubah display:none menjadi display:block agar form terlihat. Dan ketika icon di klik untuk kedua kalinya maka form akan menghilang, karena dengan jquery kita merubah display:block kembali menjadi display:none untuk menyembunyikan ID #searchbar

Animasi Dengan Jquery

Untuk merubah-rubah class css dengan mudah, kita membutuhkan jquery. Bila pengunjung melalukan klik pada icon pencarian(kaca pembesar) yang ada di menu maka jquery akan merubah class asli dari Font Awesome menjadi .fa-search-minus. Dari sudut pandang User Experience (UX) ini sangat fantastis karena membantuk untuk membedakan antara kolom pencarian tersembunyi dan terlihat

$(function(){
  var $searchlink = $('#searchtoggl i');
  var $searchbar  = $('#searchbar');
  
  $('.top-menu ul li a').on('click', function(e){
    e.preventDefault();
    
    if($(this).attr('id') == 'searchtoggl') {
      if(!$searchbar.is(":visible")) { 
        // if invisible we switch the icon to appear collapsable
        $searchlink.removeClass('fa-search').addClass('fa-search-minus');
      } else {
        // if visible we switch the icon to appear as a toggle
        $searchlink.removeClass('fa-search-minus').addClass('fa-search');
      }
      
      $searchbar.slideToggle(300, function(){
        // callback after search bar animation
      });
    }
  });
  
  $('#searchform').submit(function(e){
    e.preventDefault(); // stop form submission
  });
});

Animasi muncul dan menghilang

Hasil

Berikut ini adalah hasil yang telah kita buat, dan jika anda tertarik ingin memiliki source code nya anda bisa langsung mendownload nya dari github TWD

Sekian

Sampai disini tutorial kali ini, semoga ini bisa menginspirasi anda untuk menerapkan cara-cara seperti ini pada website yang sedang anda buat, desain form seperti ini bisa anda gunakan pada website statis, fluid maupun responsive.

Salam Web Design Indonesia





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

11 thoughts on “Tutorial Cara Membuat Form Pencarian Tersembunyi Dengan Jquery

  1. private seo says:

    sangat membantu saya sudah banyak menerapkan ilmu dari sini dan salah satunya saya terapkan di http://www.kursusseomurah.com/

  2. andrian says:

    gan klo button searchnya di pencet bisa gak klo keluar login

  3. idho says:

    gan
    sy mau buat media tutorial berbasis web tp tdk satupun yg sy tau cara buatnya mungkin agan bisa kasi solusi buat sy

  4. memang sangat bagus mas tutorialnya, semoga semakin jaya dan sukses selalu,, salam selalu, semoga web saya jualfurniturejepara.com bisa bersaing dengan yang lain

  5. Go Go Go says:

    di pasang di blog form searchnya kok gak bisa yah? pas waktu di klik pada icon searchnya gak muncul formnya. ada masukan gak bang?

  6. mmanx says:

    Gan di.bagian topik ente cara ganti.hover nya itu lambat gak langsung ke ganti gitu warnanya gmana yah gan ? Ada tutorialnya gan? Ane cari cari kgak ada . T_T

  7. […] Baca Juga: Tutorial Cara Membuat Form Pencarian Tersembunyi Dengan Jquery […]

  8. THeo says:

    Keren gan, tapi ada yang mau ditanyakan, itu fungsi reset css untuk apa ya? hehe terima kasih :)

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development