.png)
Cara Membuat Form Pencarian Tersembunyi Pada Navbar seperti di gmail
Selamat Malam Bertemu lagi dengan Saya Juanas di tutorial Cara Membuat Form Pencarian yang bisa disembunyikan seperti di gmail, ketika icon cari di klik maka form pencarian akan muncul. Saya Menggunakan efek toggle di button nya kemudian ditambahkan style position nya absolute dan z-index nya100 agar form pencarian menumpuk diatas navbar dan berada di layer paling atas, oke langsung saja buat ini dia scriptnya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Web</title>
</head>
<body>
<div class="topnav">
<li><a class="ubahclass" id="home">Home</a></li>
<li><a class="ubahclass" id="blog">Blog</a></li>
<li><a class="ubahclass" id="kontak">Kontak</a></li>
<li><a class="ubahclass" id="profil">Profil</a></li>
<div id="flip" class="btn-link"><i class="fa fa-search"></i></div>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</li>
</div>
<div id="panel">
<button id="close"><i class="fa fa-arrow-left"></i></button>
<input type="text" style="width:70%;" placeholder="Cari teman, pesan atau halaman disini">
<button class="btns"><i class="fa fa-search"></i></button>
</div>
</nav>
</div>
</body>
</html>
Lalu ini javascriptnya :
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("fast");
});
$("#close").click(function(){
$("#panel").slideToggle("fast");
});
});
dan untuk css nya saya gunakan seperti ini:
#panel, #flip {
text-align: center;
background-color: transparent;
border: none;
width: 10px;
float: right;
position: absolute;
display: inline-box;
visibility: visible;
}
#flip {
cursor: pointer;
}
#flip:hover{
color: #00ccff;
}
#panel {
padding: 10px;
width: 100%;
top: 0;
display: none;
float: right;
background: #fff;
z-index: 4;
}
dan ini adalah tampilan form pencarian nya
Sekian tutorial cara membuat form pencarian yang tersembunyi semoga bermanfaat, terimakasih
0 komentar :