Cara Membuat Form Pencarian Tersembunyi Menggunakan Jquery

Halo teman-teman pada tutorial kali ini saya akan menjelaskan Cara Membuat Form Pencarian Tersembunyi Menggunakan Jquery, seperti yang kita ketahui hampir semua website dinamis menggunakan form pencarian, karena form pencarian ini berfungsi sebagai pencarian kata kunci atau keyword yang ingin dicari oleh pengunjung website, dan form pencarian pada sebuah website juga memudahkan pengunjung untuk mencari sebuah informasi yang dibutuhkan.

Pada setiap website tentu memiliki design yang berbeda-beda untuk form pencarian nya, namun pada tutorial kali ini kita akan membuat sebuah Form Pencarian Tersembunyi Menggunakan Jquery, jadi ketika logo pencarian atau search kita klik maka akan muncul sebuah form untuk kita memasukan sebuah kata kunci atau keyword.

Oke teman-teman biar teman-teman lebih paham lagi tentang Cara Membuat Form Pencarian Tersembunyi Menggunakan Jquery kita langsung saja masuk ke study casenya tentang Cara Membuat Form Pencarian Tersembunyi Menggunakan Jquery.

Nah untuk Membuat Form Pencarian Tersembunyi Menggunakan Jquery langkah pertama kita akan membuat sebuah struktur HTML nya terlebih dahulu, yang kedua kita akan mendesain layout atau tampilan dari website kita, dan yang terakhir kita akan membuat proses untuk javacsript nya.

Oke teman-teman kita langsung saja masuk ketahap yang pertama kita akan membuat file index.html untuk strukturnya, teman-teman bisa simpan script yang terdapat dibawah ini dengan nama index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Cara Membuat Form Pencarian Tersembunyi Menggunakan Jquery</title>
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" type="text/css" media="all" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
</head>
<body>
<div class="container">
	<header>	
		<div class="menu">
			<ul>
				<div class="left">
					<li><a href="">Home</a></li>
					<li><a href="">About</a></li>
					<li><a href="">Blog</a></li>
				</div>
				<div class="right">
					<li><a href="#" id="toggl"><i class="fa fa-search fa-lg right"></i></a></li>
				</div>
			</ul>
		</div>
	</header>

	<div id="search" class="search"> 
		<form id="form" method="" action="#"> 
			<button type="submit" class="fa fa-search fa-4x submit"></button> 
			<input type="search" class="hidd" placeholder="Search..."> 
		</form> 
	</div>
	<article>
		<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
	</article>
</div>

</body>
 	 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	 <script src="script.js"></script>
</html>

Langkah selanjutnya kita akan mendesain layout nya dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan mana style.css

*{margin: 0; padding: 0}

.container{
	background:#ececec; 
	margin:auto; width: 950px; 
	padding: 20px;
}
header{
	overflow: hidden; 
	border-bottom: 1px solid #ddd;
}
.menu {overflow: hidden;}
.menu .right{
	float: right;
	width: 8%;
}
.menu .left{
	float: left;
	width: 90%
}
.menu ul{
	list-style-type: none;
}
.menu ul li{display: inline-block;}
.menu ul li a{
	display: block; 
	padding: 10px; 
	font-size: 16px;	
	color: #002633;
}
.menu ul li a:hover{color: #B16B67;}
.search {
	display:none;
	float:left;
	width: 915px;
	height:62px;
	padding-left:25px;
	padding-right:10px;
	z-index:9999;
	background:#fff;
}
.hidd {
	width:88%;
	border:0;
	line-height:60px;
	font-size:25px;
	font-weight:bold;
	color:#3E3E3E;
	padding:0;
	background: #fff;
}
.submit {
	float:right;
	margin-top:6px;
	background:none;
	color:#717171;
	border:0;
	cursor:pointer;
}
article{text-align: center;}
.fa-4x {font-size: 45px !important}

Berikutnya kita akan membuat file untuk Jquery nya dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama script.js

$(function(){
  var $searchlink = $('#toggl i');
  var $search  = $('#search');
  $('.menu ul li a').on('click', function(e){
    e.preventDefault();
    
    if($(this).attr('id') == 'toggl') {
      if(!$search.is(":visible")) { 
        $searchlink.removeClass('fa-search').addClass('fa-search-minus');
      } else {
        $searchlink.removeClass('fa-search-minus').addClass('fa-search');
      }
      
      $search.slideToggle(300, function(){
      });
    }
  });
  
  $('#form').submit(function(e){
    e.preventDefault();
  });
});

Nah kita telah membuat file index.html, style.css, dan script.js silahkan teman teman simpan script diatas jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini

Bagaimana teman-teman cukup mudah bukan Cara Membuat Form Pencarian Tersembunyi Menggunakan Jquery-nya, sekian dulu tutorial saya kali ini tentang Cara Membuat Form Pencarian Tersembunyi Menggunakan Jquery.

Semoga Bermanfaat

Terimakasih