Cara Membuka Kotak Pencarian OnClick dengan CSS

sukma
sukma
4 minute read

Tutorial ini membantu Anda membuat bilah pencarian beralih yang membuka tombol OnClick. Secara default, t bidang teks akan tetap tersembunyi dan muncul saat pengguna mengklik tombol masukan.

Dengan kata lain, ini berfungsi seperti tarik-turun tempat pengguna mengeklik untuk melihat item menu tambahan. Dalam kasus kami, kami akan mewujudkannya untuk membuka formulir pencarian.

Ini adalah kotak pencarian yang responsif dan dapat disesuaikan yang dapat Anda terapkan dengan atau tanpa navigasi. Dalam demo, saya sudah menyiapkannya dengan bilah navigasi.

Hanya untuk disebutkan di sini, ini bukan bilah pencarian animasi, ini adalah kotak pencarian sederhana yang beroperasi dengan ikon pencarian beralih. Anda dapat melihat tutorial kami sebelumnya tentang membuat kotak pencarian animasi dengan jQuery yang juga berfungsi dengan bilah navigasi.

Desainnya sederhana dan bersih yang meningkatkan pengalaman pengguna dan menghilangkan bilah pencarian yang tampak membosankan.

Cara Membuat Kotak Pencarian Yang Buka OnClick

Mari kita mulai dengan membuat markup HTML untuk Kotak Pencarian Onclick. Kami memiliki bilah navigasi div yang harus menentukan tautan navigasi. Untuk menjaga markup tetap sederhana, saya hanya menambahkan formulir pencarian dan tombol ke item menu terakhir.

Selain itu, saya menempatkan file formulir dan tombol pencarian Kode HTML di dalam div "togglesearch". Div ini akan tetap tersembunyi dan hanya muncul ketika tombol pencarian diklik.

Saya menyertakan pustaka Font Awesome Webfont untuk membuat ikon kaca pembesar yang dapat diskalakan.

<div class="navbar">   <ul>     <li>home</li>     <li>work</li>     <li>projects</li>     <li>about</li>     <li>contact</li>     <li class="searchbar">         <i class="fa fa-search" aria-hidden="true"></i>          <div class="togglesearch">             <input type="text" placeholder=""/>             <input type="button" value="Search"/>         </div>     </li>   </ul> </div>

Gaya

Bagian selanjutnya adalah penataan. Saya akan menerapkan CSS untuk mendesain bilah navigasi. Jika Anda tidak ingin menerapkannya di situs web Anda atau Anda sudah memiliki bilah navigasi, Anda tidak perlu menambahkan CSS berikut.

.navbar {     width: 100%;     background: #46315b;     display: inline-block;     padding: 10px; } .navbar ul{   list-style: none;   margin: 0 auto;   padding:0; } .navbar ul li{   color: #fff;   float: left;   line-height: 50px;   text-align: center;   cursor: pointer;   font-weight: 900;   text-transform: uppercase;   font-family: Arial;   transition: 0.5s;   position: relative;   padding:0 20px; } .navbar ul li:nth-child(6){   background: #D80B15; } .navbar ul li:hover:not(.active){   background: #D80B15; }

Sekarang bagian terpenting dari CSS adalah membuat fungsionalitas kotak Pencarian.

.togglesearch{   background: #E8E8E4;   position: absolute;   top: 54px;   right: 28.7%;   width: 350px;   height: 60px;   line-height: 60px;   box-shadow: 0 0 10px rgba(0,0,0,0.5);   border-top:4px solid #D80B15;   display: none; } .togglesearch:before{   content: "";   position: absolute;   top: -32px;   right: 13px;   border-left: 12px solid transparent;   border-right: 12px solid transparent;   border-top: 14px solid transparent;   border-bottom: 14px solid #D80B15; } .togglesearch input[type="text"]{   width: 200px;   padding: 5px 10px;   margin-left: 23px;   border: 1px solid #D80B15;   outline: none; } .togglesearch input[type="button"]{   width: 80px;   padding: 5px 0;   background: #D80B15;   color: #fff;   margin-left: -6px;   border: 1px solid #D80B15;   outline: none;   cursor: pointer; }

terakhir, kami membutuhkan sedikit CSS untuk desain responsif.

@media only screen and (min-width:240px) and (max-width: 768px){     .navbar ul li{         float:none;         display:block;         text-align:center;         margin:0 auto;     } }

Javascript

Untuk menangani fungsi toggle, kita perlu mengambil sedikit bantuan dari fungsi toggle Javascript. Mari kita inisialisasi jQuery dengan menggunakan fungsi siap dokumen dan menggunakan fungsi klik untuk ikon pencarian.

Untuk membuka div saat diklik, kita akan menggunakan fungsi toggle.

$(document).ready(function() { 	$(".fa-search").click(function() { 	   $(".togglesearch").toggle(); 	   $("input[type="text"]").focus(); 	 }); });

Itu dia. Kami selesai dengan membuat formulir pencarian yang ditampilkan ketika Anda mengklik tombol.