Cara Membuat Form Pencarian Tersembunyi Menggunakan Jquery
Halo teman-teman di panduan kali ini saya akan menjelaskan Cara Membangun Form Pencarian Tersembunyi Menggunakan Jquery, seperti yang kita ketahui hampir segala situs dinamis menggunakan form pencarian, karena form pencarian ini berfungsi selaku pencarian kata kunci atau keyword yang ingin dicari oleh pengunjung situs, dan form pencarian di sebuah situs pun mempermudah pengunjung bagi mencari sebuah informasi yang dibutuhkan.
Di setiap situs tentu mempunyai design yang berbeda-beda bagi form pencarian nya, namun di panduan kali ini kita akan membangun sebuah Form Pencarian Tersembunyi Menggunakan Jquery, jadi ketika logo pencarian atau search kita klik karenanya akan muncul sebuah form bagi kita memasukan sebuah kata kunci atau keyword.
Oke teman-teman biar teman-teman lebih paham lagi mengenai Cara Membangun Form Pencarian Tersembunyi Menggunakan Jquery kita seketika saja masuk ke study casenya mengenai Cara Membangun Form Pencarian Tersembunyi Menggunakan Jquery.
Nah bagi Membangun Form Pencarian Tersembunyi Menggunakan Jquery langkah pertama-tama kita akan membangun sebuah struktur HTML nya terlebih dahulu, yang kedua kita akan mendesain layout atau tampilan dari situs kita, dan yang terakhir kita akan membangun proses bagi javacsript nya.
Oke teman-teman kita seketika saja masuk ketahap yang pertama-tama kita akan membangun file index.html bagi strukturnya, teman-teman dapat simpan script yang terdapat dibawah ini dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Cara Membangun 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=fitur>
<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 berikutnya 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;
}
.fitur {overflow: hidden;}
.fitur .right{
float: right;
width: 8%;
}
.fitur .left{
float: left;
width: 90%
}
.fitur ul{
list-style-type: none;
}
.fitur ul li{display: inline-block;}
.fitur ul li a{
display: block;
padding: 10px;
font-size: 16px;
color: #002633;
}
.fitur 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 membangun file bagi Jquery nya dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama script.js
$(function(){
var $searchlink = $('#toggl i');
var $search = $('#search');
$('.fitur 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 membangun file index.html, style.css, dan script.js silahkan teman teman simpan script diatas bila kita jalankan di browser karenanya akan terlihat hasilnya seperti dibawah ini
Bagaimana teman-teman lumayan gampang bukan Cara Membangun Form Pencarian Tersembunyi Menggunakan Jquery-nya, demikianlah dulu panduan saya kali ini mengenai Cara Membangun Form Pencarian Tersembunyi Menggunakan Jquery.
Semoga Bermanfaat
Terimakasih
Sumber https://kursuswebsite.org
