Cara Membuat Form Pencarian Tersembunyi Pada Navbar seperti di gmail - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Form Pencarian Tersembunyi Pada Navbar seperti di gmail, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel css,
Artikel desain-web,
Artikel jQuery, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Cara Membuat Form Pencarian Tersembunyi Pada Navbar seperti di gmail
link : 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
Anda sekarang membaca artikel Cara Membuat Form Pencarian Tersembunyi Pada Navbar seperti di gmail dengan alamat link https://dev-create.blogspot.com/2016/12/cara-membuat-form-pencarian-tersembunyi.html
Judul : Cara Membuat Form Pencarian Tersembunyi Pada Navbar seperti di gmail
link : Cara Membuat Form Pencarian Tersembunyi Pada Navbar seperti di gmail
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
Demikianlah Artikel Cara Membuat Form Pencarian Tersembunyi Pada Navbar seperti di gmail
Sekianlah artikel Cara Membuat Form Pencarian Tersembunyi Pada Navbar seperti di gmail kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Cara Membuat Form Pencarian Tersembunyi Pada Navbar seperti di gmail dengan alamat link https://dev-create.blogspot.com/2016/12/cara-membuat-form-pencarian-tersembunyi.html
