Klik untuk Mengungkapkan Bilah Pencarian dengan CSS

sukma
sukma
4 minute read

Sudahkah Anda mencoba kotak telusur yang dapat diperluas? Bagaimana dengan klik untuk menampilkan bilah pencarian? Ia bekerja hampir serupa tetapi dengan animasi tambahan dan lebih halus.

Hari ini kita akan membuat bilah pencarian terbuka dengan bantuan CSS dan sedikit jQuery untuk menangani fungsi klik saja.

Ini adalah formulir penelusuran ramah seluler yang berfungsi dengan baik di seluler dan tablet. Ini juga kompatibel dengan sebagian besar browser.

Ide dasar untuk menampilkan ikon kaca dan ketika pengguna mengklik kotak pencarian akan terbuka dengan animasi yang bagus. Ini akan terbuka di sisi kiri tombol dan akan memiliki tepi bawah yang bagus dan bersih.

Dalam status terbuka, bilah pencarian akan memiliki tanda tutup (X) yang memungkinkan Anda menutup kotak pencarian. Seluruh antarmuka sangat rapi dan bersih.

Selain itu, ini memungkinkan Anda menyesuaikan desainnya sesuai keinginan. Ini cukup mudah untuk disesuaikan. Yang Anda butuhkan untuk mengedit CSS. Anda bisa mengubah background-color, border, dll agar terlihat lebih modern.

Cara Membuat Klik untuk Mengungkapkan Bilah Pencarian

Sangat mudah untuk membuat kotak pencarian ini. Mari kita mulai dengan struktur HTML yang sederhana. Kami akan membuat pembungkus utama kemudian menentukan HTML untuk header.

Setelah itu, kita akan menentukan tombol dengan ID search-toggle. Selanjutnya, kita akan mendefinisikan div lain dengan nama kelas form-search dan menempatkan label, ikon pencarian dan kolom teks jenis input.

Untuk tujuan demo, kami juga membuat HTML tambahan yang dapat Anda gunakan untuk menampilkan hasil pencarian.

<div class="search-wrapper">   <header class="main-search clearfix">     <button type="button" class="btn pull-right" id="search-toggle">       <span class="fa fa-search"></i>     </button>     <div class="form-search stretch-to-fit">       <label for="search" class="btn pull-left">         <span class="btn fa fa-search"></i>       </label>       <div class="search-control stretch-to-fit">         <input type="text" id="search" placeholder="Search...">       </div>     </div>   </header>   <div class="search-container">     <div class="search-results">       <ul>         <li>You can show search results here.</li>         <li>Lorem ipsum dolor sit amet, consectetur.</li>         <li>Lorem ipsum dolor sit amet, consectetur.</li>         <li>Lorem ipsum dolor sit amet, consectetur.</li>       </ul>     </div>   </div> </div>

CSS

Bagian selanjutnya adalah penataan. Kita tahu bahwa tanpa CSS, HTML tidak berarti apa-apa. Apa yang kami lakukan di sini untuk menerapkan warna latar belakang ke wadah dan mendesain tombol agar terlihat bagus.

Selanjutnya, kita akan memberi style pada area utama bilah pencarian dengan menerapkan beberapa latar belakang dan mengatur ketinggian. Kami juga akan menerapkan beberapa animasi sehingga ketika bilah pencarian terbuka, itu harus beranimasi.

Kami akan menerapkan tepi-bawah dengan tinggi tetap tetapi lebar penuh saat dibuka. Serupa kita akan menambahkan beberapa gaya umum untuk membuat bilah pencarian terlihat lebih baik.

.search-wrapper {   background: #e7e7e7; } button {   background: none;   border: none;   outline: none; } .btn {   background: #fff;   line-height: 72px;   text-align: center;   width: 72px;   cursor: pointer; } .stretch-to-fit {   overflow: hidden; } .main-search {   background: #d0cece;   clear: both;   height: 72px;   z-index: 16000; } .main-search .form-search {   opacity: 0;   overflow: hidden;   max-width: 0;   -webkit-transition: all 300ms ease;   -moz-transition: all 300ms ease;   -o-transition: all 300ms ease;   transition: all 300ms ease; } .main-search .form-search .search-control {   padding: 0; } .main-search .form-search .search-control input {   background: none;   border: none;   border-bottom: 2px solid #878787;   height: 30px;   margin: 21px 0;   width: 100%; } .main-search.active {   background: #ffffff; } .main-search.active .form-search {   opacity: 1;   max-width: 100%; } input {   outline: 0; } .search-container {   overflow: hidden;   padding: 10px 0; } .search-container .search-results {   height: 100%;   overflow-y: auto; } .search-container .search-results ul {   list-style: none;   margin: 0;   padding: 0; } .search-container .search-results ul li {   border-bottom: 1px solid #ccc;   height: 84px;   padding: 15px; }

Javascript

Langkah terakhir untuk menambahkan Javascript. Kami akan menggunakannya hanya untuk membuka tombol pencarian, tidak ada yang lain. Kami akan menggunakan fungsi klik jQuery yang akan membantu kami membuka kotak pencarian.

Selain itu, kami akan menggunakan fungsi sakelar jQuery yang akan membantu kami mengaktifkan berbagai kelas seperti bilah pencarian, tombol tutup, dan ikon pencarian.

$( document ).ready(function() { $('html').on('click', '#search-toggle', function() {   $('#search').val('');   if ($(this).find('span').hasClass('fa-search')) {     $('#search').focus();   } 	$('.main-search').toggleClass('active');   $(this).find('span').toggleClass('fa-search');   $(this).find('span').toggleClass('fa-times'); }); });

Itu dia. Selesai! Mari kita sesuaikan atau gunakan.