Cara menggunakan tautan lembar gaya jquery
|
Halo teman-teman pada tutorial kali ini saya akan menjelaskan cara membuat form pencarian tersembunyi menggunakan Jquery, seperti yang kita ketahui hampir semua website dinamis menggunakan form pencarian, karena form pencarian ini berfungsi sebagai pencarian keyword atau kata kunci yang ingin dicari oleh pengunjung website. , dan Form pencarian pada sebuah website juga memudahkan pengunjung untuk mencari informasi yang mereka butuhkan Setiap website memiliki desain yang berbeda untuk form pencariannya, namun pada tutorial kali ini kita akan membuat Form Pencarian Tersembunyi Menggunakan Jquery, jadi ketika kita mengklik logo pencarian maka akan muncul form untuk kita memasukkan keyword atau kata kunci Oke teman-teman biar kalian lebih paham tentang Cara Membuat Form Hidden Search Menggunakan Jquery, yuk langsung saja ke studi kasus tentang Cara Membuat Form Hidden Search Menggunakan Jquery Nah, untuk membuat hidden search form menggunakan Jquery langkah pertama adalah membuat struktur HTML terlebih dahulu, kedua mendesain layout atau tampilan website kita, dan langkah terakhir adalah membuat proses javacsript. Oke sobat langsung saja ke tahap pertama dimana kita akan membuat file index. html untuk strukturnya sobat bisa menyimpan script yang terdapat di bawah ini dengan nama index. html
Langkah selanjutnya adalah mendesain layout dan silahkan teman-teman simpan script yang terdapat di bawah ini dengan style yang mana. css *{margin: 0; padding: 0}
.container{
background:#ececec;
margin:auto; width: 950px;
padding: 20px;
}
header{
overflow: hidden;
border-bottom: 1px solid #ddd;
}
.menu {overflow: hidden;}
.menu .right{
float: right;
width: 8%;
}
.menu .left{
float: left;
width: 90%
}
.menu ul{
list-style-type: none;
}
.menu ul li{display: inline-block;}
.menu ul li a{
display: block;
padding: 10px;
font-size: 16px;
color: #002633;
}
.menu ul li a:hover{color: #B16B67;}
.search {
display:none;
float:left;
width: 915px;
height:62px;
padding-left:25px;
padding-right:10px;
z-index:9999;
background:#fff;
}
.hidd {
width:88%;
border:0;
line-height:60px;
font-size:25px;
font-weight:bold;
color:#3E3E3E;
padding:0;
background: #fff;
}
.submit {
float:right;
margin-top:6px;
background:none;
color:#717171;
border:0;
cursor:pointer;
}
article{text-align: center;}
.fa-4x {font-size: 45px !important}_Selanjutnya kita akan membuat file untuk Jquery dan silahkan sobat simpan script yang terdapat dibawah ini dengan nama scriptnya. js $(function(){
var $searchlink = $('#toggl i');
var $search = $('#search');
$('.menu ul li a').on('click', function(e){
e.preventDefault();
if($(this).attr('id') == 'toggl') {
if(!$search.is(":visible")) {
$searchlink.removeClass('fa-search').addClass('fa-search-minus');
} else {
$searchlink.removeClass('fa-search-minus').addClass('fa-search');
}
$search.slideToggle(300, function(){
});
}
});
$('#form').submit(function(e){
e.preventDefault();
});
});Nah kita telah membuat file index. html, gaya. css, dan script. js silahkan simpan script diatas jika kita jalankan di browser maka hasilnya akan seperti gambar dibawah ini Bagaimana ya teman-teman cara membuat Form Hidden Search Menggunakan Jquery cukup mudah bukan, sekian tutorial saya kali ini tentang Cara Membuat Form Hidden Search Menggunakan Jquery |
