Okay, kali ini saya akan berbagi tutorial untuk membuat Search bar dengan animasi yang jika disentuh (hover) akan melebar. Sebenarnya, ada beberapa tutorial sejenis yang lebih "wow", namun menurut saya sangat rumit untuk dimengerti. Nah, Saya disini membuatnya sendiri dengan script sesedikit mungkin agar mudah anda implementasikan sendiri di website anda.
Oke, Mari kita mulai saja.. ini dia scriptnya :
<!DOCTYPE html>
<html>
<head>
<title>Expanding search bar</title>
<style>
/*reset dulu cssnya*/
* {
padding:0;
margin:0;
}
/*gitu aja*/
.demo-search-bar {
position: relative;
padding:10px;
background:#606036;
width:350px;
text-align: right;
}
.demo-search-bar * {
padding:7px;
border:none;
}
.demo-search-bar .demo-input-search, .demo-search-bar .demo-input-search-active{
width:0px;
margin-right:-40px;
text-align: left;
outline: none;
}
.demo-search-bar .demo-input-search:focus {
outline: hidden;
border:none;
box-shadow: none;
}
.demo-search-bar button {
background:#333;
color:#fafafa;
}
.demo-search-bar button:hover {
background:#222;
color:#fff;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<center>
<form class="demo-search-bar" action="">
<input type="text" class="demo-input-search" placeholder="Search">
<button type="button" class="demo-search-button">Search</button>
</form>
</center>
<script type="text/javascript">
/* ini jquery yang membuat efek animasinya */
$(document).ready(function() {
$(".demo-search-bar").mouseenter(function() {
$(".demo-input-search").addClass("demo-input-search-active");
$(".demo-input-search").animate({width:'+=250px'},"slow");
$(".demo-input-search").focus();
$(".demo-input-search").removeClass("demo-input-search");
});
$("*").click(function() {
$(".demo-input-search-active").addClass("demo-input-search");
$(".demo-input-search-active").animate({width:'-=250px'},"slow");
$(".demo-input-search-active").blur();
$(".demo-input-search-active").removeClass("demo-input-search-active");
});
});
</script>
</body>
</html>
<html>
<head>
<title>Expanding search bar</title>
<style>
/*reset dulu cssnya*/
* {
padding:0;
margin:0;
}
/*gitu aja*/
.demo-search-bar {
position: relative;
padding:10px;
background:#606036;
width:350px;
text-align: right;
}
.demo-search-bar * {
padding:7px;
border:none;
}
.demo-search-bar .demo-input-search, .demo-search-bar .demo-input-search-active{
width:0px;
margin-right:-40px;
text-align: left;
outline: none;
}
.demo-search-bar .demo-input-search:focus {
outline: hidden;
border:none;
box-shadow: none;
}
.demo-search-bar button {
background:#333;
color:#fafafa;
}
.demo-search-bar button:hover {
background:#222;
color:#fff;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<center>
<form class="demo-search-bar" action="">
<input type="text" class="demo-input-search" placeholder="Search">
<button type="button" class="demo-search-button">Search</button>
</form>
</center>
<script type="text/javascript">
/* ini jquery yang membuat efek animasinya */
$(document).ready(function() {
$(".demo-search-bar").mouseenter(function() {
$(".demo-input-search").addClass("demo-input-search-active");
$(".demo-input-search").animate({width:'+=250px'},"slow");
$(".demo-input-search").focus();
$(".demo-input-search").removeClass("demo-input-search");
});
$("*").click(function() {
$(".demo-input-search-active").addClass("demo-input-search");
$(".demo-input-search-active").animate({width:'-=250px'},"slow");
$(".demo-input-search-active").blur();
$(".demo-input-search-active").removeClass("demo-input-search-active");
});
});
</script>
</body>
</html>
Penjelasan :
1. Script warna merah adalah untuk pemanggilan jquery library.
2. Script warna hijau adalah untuk pengukuran panjang search bar yang muncul.
Demo :
Itu saja, semoga bermanfaat!.
~Muhammad Syakirurohman~
Dilarang menyalin artikel tanpa sumber!
