Widodo

Membuat Expanding Search dengan css dan jquery

Selamat malam sobat jumpa lagi sama s-widodo.com mohon maaaf bau sempat update karena ada beberapa kesibukan dan upgrade website, untuk iu mungkin langsung aja ke tutorial berikutnya untuk tutorial hari kita akan membuat costum pencarian atau serach dengan menggunakan css3 dan jquey dalam tutorial ini ada beberapa code yang harus dibuat seperti css untuk membuat design html dan jquery. dalam costum pencian ini hanya icon seach saja yang kan ditampilkan dan diletakkan di sebalah menu atau samping menu jika icon search ti tekan makan akan keluar berupa inputan pencarianya.

Seperti yang kita ketahui, orang akan mencari informasi yang belum ditemukannya di kotak pencarian tetapi jika tidak ada sebuah pencarian dalam web maupun blog maka pengunjung akan kebingngan untuk mencari sebuah informasi, oleh karna itu kotak pencarin sangatlah pneting dalam sebuah web untuk mencari informasi yang dibutuhkan oleh pengunjung. oke mungkin itu saja yang bisa saya jelaskan untuk itu kita praktekan langsung...

1. yang pertama pasti gak jauh buat document baru dan simpan di dalam folder yang udah kamu buat

2. setelah itu kita buat costum dulu atau layutnya seperti contoh di bawah ini

body{padding:0px; margin:0px; background:#1BBC9B}
.menu { background:#34495E; height:96px; margin: auto; width:100%;}
.logo {float:left; margin:10px;}
.menu ul, li {list-style:none; margin:0px; padding:0px;}
.menu li a{float:left; font-family:Arial, Helvetica, sans-serif; font-size:20px; text-decoration:none; color:#ffffff; text-align:center; 
padding:35px 10px 35px 10px; float:left; margin-right:10px;margin-left:10px;}
.menu li a:hover {background:#ffffff; color:#444444; }

.search { margin-top:20px;
position: relative;
float:right;
width: 60px;
height: 60px;

}
.label { background:#1BBC9B;
width: 50px;
height: 50px;
position: relative;
z-index: 20;
}
.label label {
display: block;
width: 50px;
height: 50px;
background: url("./search.png") 0 0;
font-size: 0;
color: rgba(0, 0, 0, 0);
text-indent: -9999px;
cursor: pointer;
}
.label label:hover {
background: url("./search.png") -50px 0
}
.label.active label {
background: url("./search.png") -50px 0
}
.input {
position: absolute;
top: 0;
right: 60px;
width: 450px;
height: 50px;
z-index: 5;
overflow: hidden;
}
.input input {
display: block;
position: absolute;
top: 0;
right: -460px;
width: 450px;
height: 100%;
margin: 0;
border: none;
background-color: #1BBC9B;
color: #fff;
font-size: 17px;
-webkit-backface-visibility: none;
-moz-backface-visibility: none;
-ms-backface-visibility: none;
backface-visibility: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-transition: right 0;
-moz-transition: right 0;
-ms-transition: right 0;
-o-transition: right 0;
transition: right 0;
}
.input input:focus {padding-left:20px;
outline: none
}
.input.focus {padding-left:20px;
z-index: 20
}
.input.focus input {
right: 0; padding-left:20px;
-webkit-transition: right 0.3s;
-moz-transition: right 0.3s;
-ms-transition: right 0.3s;
-o-transition: right 0.3s;
transition: right 0.3s;
}

.content_1 {background:#297FB8; width:100%; height:400px;}

3. Setelah itu kita tinggal panggil dengan html sperti dibawah

<div class="menu"><div class="logo"><img src="mi5-team.png"></div>
<ul>

<li><a href="#">Beranda</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Portofolio</a></li>
<li><a href="#">Kontak</a></li> 
<form class="search" action="#" method="post">
<div class="label"><label for="search-terms" id="search-label">search</label></div>
<div class="input"><input type="text" name="search-terms" id="search-terms" placeholder="Enter search ..."></div>
</form>

</ul>
</div>

<div class="content_1"></div>

4. Hampir selesaikan tinggal beri script jqueynya

(function(window){
var searchEl = document.querySelector(".input");
var labelEl = document.querySelector(".label");
labelEl.addEventListener("click",function(){
if (classie.has(searchEl,"focus")) {
classie.remove(searchEl,"focus");
classie.remove(labelEl,"active");
} else {
classie.add(searchEl,"focus");
classie.add(labelEl,"active");
}
});
document.addEventListener("click",function(e){
var clickedID = e.target.id;
if (clickedID != "search-terms" && clickedID != "search-label") {
if (classie.has(searchEl,"focus")) {
classie.remove(searchEl,"focus");
classie.remove(labelEl,"active");
}
}
});
}(window));

5. Selesai gan selamat berjuang semoga berhasil :)

Jangan lupa  download tool jquery Classie.js di sini
Download

Bagi Temen-temen yang masih bingung bisa download source codenya dibawah ini :

Demo Download



Artikel Terkait

0 Komentar