Today’s concept is to create an Expanding Animated Search Box in JavaScript, HTML, & CSS. Now every website use search box, even I don’t know any website which not has a search option. In other words, the search option on any website is mandatory.
Today we will create a search box with animation effect with JQuery ( a JavaScript Library ) HTML, and CSS. This box has also an expanding effect using jquery. When you click on search icon the search box will appear. This will be a very cool effect for your website or blog.
This program is very simple and easy to understand. If you are a beginner and don’t have any knowledge about JQuery, That’s not a problem. After looking at the code program will very easy and understandable for you. Let’s take a look at this program first.
Preview Of JQuery Expanding Box
First, see a preview of this program, how its look like.
Now you can see this program visually. If you like this and want to put it on your website, the source code of this program is available below.
You May Also Like:
Animated Search Box In JavaScript HTML & CSS Source Code
Before sharing source code I want to say a little bit about this program. This animated search box in javascript program basically built-in Jquery. I say javascript in the title because JQuery is a javascript library, and I don’t have any jquery category. In the whole program, Jquery is only 5 lines.
That’s why jquery comes, to create difficult javascript program easily and quickly. I used CSS transform: rotate(-360deg); property for the animation effect. When I click on search icon box will appear and the second time I click on the same icon box will disappear. This is javascript or jquery toggleClass command. And I also used Font Awesome for creating search icon. ( Get Font Awesome ).
You have to create 3 files for this program. One for HTML, One for CSS, And One For JavaScript. To create this program follow steps given here below.
index.html
First, Create an HTML file named ‘index.html‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>Expanding Animated Search Box | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="wrapper"> <div class="search-box"> <input type="text" placeholder="Search" class="input"> <div class="btn"> <i class="fa fa-search" aria-hidden="true"></i> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css’ for giving style this program. After successfully creating file put these codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
/* code by webdevtrick ( https://webdevtrick.com ) */ * { margin: 0; padding: 0; user-select: none; } body { background: #333; } .wrapper { position: absolute; top: 50%; left: 45%; transform: translate(-50%, -50%); } .search-box { width: 750px; height: 100px; position: relative; } .input { position: absolute; top: 20px; right: 50px; box-sizing: border-box; width: 0px; height: 63px; padding: 0 20px; outline: none; font-size: 18px; border-radius: 50px; color: #333; border: 3px solid #4DC1F9; transition: all 0.8s ease; } .btn { position: absolute; width: 80px; height: 80px; background: #4DC1F9; border-radius: 50%; right: 45px; top: 10px; cursor: pointer; text-align: center; line-height: 80px; font-size: 20px; color: #fff; transition: all 0.8s ease; } .input.active { width: 350px; right: 100px; } .btn.animate { transform: rotate(-360deg); right: 100px; } |
function.js
The final thing, create a JS file named ‘function.js‘ and cope these codes from here and paste in the javascript file.
|
1 2 3 4 5 6 |
/* code by webdevtrick ( https://webdevtrick.com ) */ $(".btn").click(function(){ $(".input").toggleClass("active").focus; $(this).toggleClass("animate"); $(".input").val(""); }); |
That’s It. Now you have successfully created an animated search box in JavaScript ( JQuery ) HTML and CSS. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
You don’t need jQuery anymore, you could use es6 querySelector and classlist
thank you, Now I should learn js es6
Shaan,
Thank you for this, one question only as this works superbly: where do I add the code to have this search my site. I’ve added code in various places that works in other searchers, but am having no luck.
Thank you for creating this fantastic tool.
Wayne
Wayne@WayneAEnglish.com