Kotak Pencarian Animasi CSS dengan HTML
Dalam tutorial ini, Anda akan belajar cara membuat kotak pencarian animasi CSS dengan jQuery & HTML. Ini juga memiliki efek meluas yang berfungsi saat pengguna mengklik ikon atau tombol pencarian.
Di artikel kami sebelumnya, kami telah merancang bilah pencarian yang bagus & indah dengan jQuery dan CSS3. Tapi di sini saya akan menunjukkan kepada Anda versi lain yang berfungsi dengan navigasi utama.
Tujuan kami untuk membuat daftar item menu dan menyimpannya di sisi kiri header dan kemudian menempatkan tombol pencarian di sisi kanan.
Ketika seseorang mengarahkan mouse ke tautan menu, ia menawarkan animasi perbatasan yang bersih sedangkan tombol pencarian akan membuka bidang pencarian saat diklik.
Kami telah membuat tiga contoh berbeda dan Anda dapat memilih siapa saja yang Anda suka. Selain itu, Anda dapat dengan mudah menyesuaikan salah satu contoh ini dalam hal warna, latar belakang, dan font, dll agar sesuai dengan desain situs Anda.
Proses pembuatan form pencarian yang bekerja dengan bar navigasi itu mudah. Semua yang akan kami definisikanheader elemen dengan ID unik.
Masing-masing termasukheader itu nav Elemen HTML yang menyimpan item menu dengan menggunakan ul dan li.
Pencarian memperbesar ikon kaca berfungsi sebagai tombol sakelar yang dilakukan menggunakan tautan jangkar sederhana. Ini membuka formulir pencarian ketika seseorang mengklik.
Contoh Kotak Telusur Animasi CSS # 1
ID unik yang kita bicarakan di atas adalah header-1 untuk contoh pertama. Kami mendefinisikan elemen HTML5 header dan menempatkan nav sebagai elemen anak. Kami hanya perlu menempatkan tombol sakelar, tautan jangkar, dan formulir pencarian seperti yang ditunjukkan di bawah ini.
<header id="header-1" class="header"> <nav class="header-nav"> <div class="search-button"> <a href="https://codeconvey.com/animated-search-box-css/#" class="search-toggle" data-selector="#header-1"></a> </div> <ul class="menu"> <li><a href="https://codeconvey.com/animated-search-box-css/#">Home</a></li> <li><a href="https://codeconvey.com/animated-search-box-css/#">About</a></li> <li><a href="https://codeconvey.com/animated-search-box-css/#">Product</a></li> <li><a href="https://codeconvey.com/animated-search-box-css/#">Services</a></li> <li><a href="https://codeconvey.com/animated-search-box-css/#">Awesome</a></li> <li><a href="https://codeconvey.com/animated-search-box-css/#">Search</a></li> <li><a href="https://codeconvey.com/animated-search-box-css/#">Map</a></li> <li><a href="https://codeconvey.com/animated-search-box-css/#">Contact</a></li> </ul> <form action="" class="search-box"> <input type="text" class="text search-input" placeholder="Type here to search..." /> </form> </nav> </header>
Gaya Pencarian Animasi
Mari kita lihat kode CSS untuk contoh pertama dari kotak pencarian beranimasi. Contoh ini membuka kotak pencarian di bawah menu ketika harus mengklik tombol pencarian.
Untuk menyelesaikan ini, kami membuat posisi absolut untuk formulir pencarian dan tinggi maksimalnya akan menjadi nol pada posisi normal. Ketinggian akan berubah saat Anda mengklik tombol, dan kami akan menggunakan .showkelas dengan jquery.
#header-1 { background: #ECF0F1 none repeat scroll 0 0; } #header-1 .search-box { position: absolute; bottom: 0; width: 100%; height: 100%; max-height: 0; -webkit-transform: translateY(100%); transform: translateY(100%); background-color: #f4d03f; -webkit-transition: all 0.3s; transition: all 0.3s; } #header-1 .search-box .search-input { width: 100%; height: 100%; padding: 0 1em; border: 0; background-color: transparent; opacity: 0; color: #fff; } #header-1 .search-box .search-input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.4); } #header-1.show .search-box { max-height: 40px; padding:5px 0; } #header-1.show .search-box .search-input { opacity: 1; } Contoh Formulir Pencarian Animasi # 2
Kode HTML dari contoh 2 mirip dengan contoh pertama, tetapi kami memiliki ID unik untuk menangani fungsinya secara berbeda.
<header id="header-2" class="header"> <h3>Example #2</h3> <nav class="header-nav"> <div class="search-button"> <a href="https://codeconvey.com/animated-search-box-css/#" class="search-toggle" data-selector="#header-2"></a> </div> <ul class="menu"> <li><a href="https://codeconvey.com/animated-search-box-css/#">Home</a></li> <li><a href="https://codeconvey.com/animated-search-box-css/#">About</a></li> <li><a href="https://codeconvey.com/animated-search-box-css/#">Product</a></li> <li><a href="https://codeconvey.com/animated-search-box-css/#">Services</a></li> <li><a href="https://codeconvey.com/animated-search-box-css/#">Awesome</a></li> <li><a href="https://codeconvey.com/animated-search-box-css/#">Search</a></li> <li><a href="https://codeconvey.com/animated-search-box-css/#">Map</a></li> <li><a href="https://codeconvey.com/animated-search-box-css/#">Contact</a></li> </ul> <form action="" class="search-box"> <input type="text" class="text search-input" placeholder="Type here to search..." /> </form> </nav> </header>
Gaya CSS
Untuk membuat animasi untuk contoh kedua dari kotak pencarian, kita akan fokus pada anak ke-n yang akan membantu kita menyembunyikan tautan menu.
#header-2 { background: #BDC3C7 none repeat scroll 0 0; overflow: hidden; } #header-2 .menu li { opacity: 1; -webkit-transition: opacity 0.2s 0.1s, -webkit-transform 0.3s; transition: opacity 0.2s 0.1s, -webkit-transform 0.3s; transition: transform 0.3s, opacity 0.2s 0.1s; transition: transform 0.3s, opacity 0.2s 0.1s, -webkit-transform 0.3s; } #header-2 .menu li:nth-child(1) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } #header-2 .menu li:nth-child(2) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } #header-2 .menu li:nth-child(3) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } #header-2 .menu li:nth-child(4) { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; } #header-2 .menu li:nth-child(5) { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } #header-2 .search-box { position: absolute; left: 0; height: 100%; padding-left: 2em; -webkit-transform: translateX(20%); transform: translateX(20%); opacity: 0; -webkit-transition: all 0.4s 0.3s; transition: all 0.4s 0.3s; } #header-2 .search-box .search-input { border: 0; width: 100%; height: 100%; background-color: transparent; } #header-2 .search-box .search-toggle { width: 14px; height: 14px; padding: 0; position: absolute; left: 5px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #header-2.show .menu li { -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 0; } #header-2.show .search-box { width: calc(100% - 5em); -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } Gaya Umum
Untuk membuat pekerjaan dari contoh di atas. Penting bahwa Anda harus menambahkan beberapa gaya umum.
/* General Style */ .header { padding: 6em 0 8em; } .header-nav { margin: 0 auto; max-width: 720px; padding-right: 3em; position: relative; } .header-nav:before, .header-nav:after { content: ''; display: table; } .header-nav:after { clear: both; } 1. Gaya Navigasi
Mari kita lakukan beberapa gaya dengan menu navigasi, dan kita membutuhkan beberapa hal dasar di sini. Semua yang kita butuhkan untuk membuat link menu inline, menambahkan beberapa warna, ukuran font, dan padding, dll. Kita juga menambahkan beberapa border animasi hover dengan menggunakan properti: before CSS3.
/* Navigation Men bar */ .menu { display: inline-block; list-style-type: none; margin: 0; padding: 0; } .menu li { display: inline-block; } .menu li a { font-size:14px; color: #5b3256; display: block; padding: 5px 20px; position: relative; -webkit-transition: color 0.3s; transition: color 0.3s; text-decoration: none; } .menu li a:before { position: absolute; content: ''; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; opacity: 0; left: 15%; right: 15%; top: 0; bottom: 0; border-left: 2px solid #763568; border-right: 2px solid #763568; } .menu li a:hover, .menu li .current a { color: #763568; } .menu li a:hover:before, .menu li .current a:before { opacity: 1; left: 0; right: 0; } 2. Tambahkan Tombol Pencarian
Kami akan membangun tombol pencarian menggunakan CSS3 murni, dan kami akan menggunakan properti: sebelum dan: setelah untuk menyelesaikannya. Kami juga menggunakan transisi dan transformasi untuk memutar gaya tombol setelah diklik. Ini kode CSS lengkapnya.
/* Search Box Button*/ .search-button { position: absolute; right: 20px; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .search-toggle { position: relative; display: block; height: 10px; width: 10px; } .search-toggle::before, .search-toggle::after { content: ''; position: absolute; display: block; -webkit-transition: all 0.1s; transition: all 0.1s; } .search-toggle::before { border: 2px solid #5b3256; border-radius: 50%; width: 100%; height: 100%; left: -2px; top: -2px; } .search-toggle::after { height: 2px; width: 7px; background: #5b3256; top: 10px; left: 8px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .search-toggle.active::before { width: 0; border-width: 1px; border-radius: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); top: -1px; left: 4px; } .search-toggle.active::after { width: 12px; left: -1px; top: 4px; } .search-input:focus { outline: none; } Javascript
Kami perlu memulai fungsi kami menggunakan .ready dan menggunakan fungsi klik javascript untuk menangani tombol pencarian. Fungsi toggleClass memungkinkan kita untuk menampilkan elemen tersembunyi.
$( document ).ready(function() { $('.header').on('click', '.search-toggle', function(e) { var selector = $(this).data('selector'); $(selector).toggleClass('show').find('.search-input').focus(); $(this).toggleClass('active'); e.preventDefault(); }); }); Contoh ketiga Anda akan temukan di demo dan sumber unduhan. Semoga Anda menyukai dan menikmati tutorial ini. Anda dapat dengan mudah menyesuaikan kode sesuai kebutuhan desain situs web Anda.
Kami telah menempatkan semua kode di komentar sehingga Anda dapat dengan mudah mengenalinya dan membuat penyesuaian dengan mudah. Yang Anda perlukan untuk mengubah kode CSS untuk membuatnya sesuai kebutuhan Anda.
