Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Web Design. Kali ini saya akan membahas tentang cara Membuat Animasi Form Search Menggunakan Bootstrap. Animasi kali ini saya membuat form search akan muncul ketika ikon search di klik dan form search dengan tampilan width melebar ketika kursor diletakan kedalam form search.
Langkah pertama untuk Membuat Animas Form Search Menggunakan Bootstrap yaitu kita membuat struktur htmlnya terlebih dahulu. Membuat struktur htmlnya kebetulan saya menggunakan bootstrap. Teman-teman bisa download terlebih dahulu bootstrapnya di getbootstrap.com. Jika sudah download, kita masuk ke struktur htmlnya dan berikut scriptnya ya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Membuat Animasi Form Search Menggunakan Bootstrap</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Membuat Animasi Form Search Menggunakan Bootstrap</h1>
<p>Form search menjadi full width ketika kursor diletakan di form search</p>
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search" id="basic-addon1" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"></span>
<input type="text" name="search" placeholder="Search.." aria-describedby="basic-addon1" class="collapse" id="collapseExample">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Nah jika sudah selesai maka kita bisa langsung membuat style cssnya di dalam tag head ya teman-teman. Dan berikut script cssnya.
<style>
body {
background-color: salmon !important;
}
.glyphicon {
top:0px !important;
}
.container{
width: 1000px;
margin: auto;
}
input[type=text] {
width: 130px;
box-sizing: border-box;
font-size: 16px;
background-color: white;
border: 1px solid #ccc;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 300% !important;
}
.input-group-addon{
width: 0% !important;
border-radius: 0px !important;
padding:16px 15px !important;
}
</style>
Jika teman-teman buka di browser masing-masing maka akan tampil seperti gambar di bawah ini.
Gambar di atas adalah gambar pertama sebelum ikon search di klik.
Dan Gambar kedua adalah tampilan form search setelah ikon search di klik.
Dan terakhir adalah gambar ketika kursor di letakan di dalam form search.
Demikian artikel tentang cara Membuat Animasi Form Search Menggunakan Bootstrap. Semoga bermanfaat dan selamat mencoba ya teman-teman.