How we can create an expanding search bar using HTML CSS JS? Solution: See this Search Bar Animation With CSS and jQuery, Expanding Bar From Icon.
Previously I have shared an SVG Search Input animation, this is similar to that but it is without SVG shapes. Basically, every website has a specific input to search for items in the whole website. And most of the time search bar placed at top of the webpage along with the navbar. The search element can be simple input, rectangular bar, rounded-rectangular bar, expanding, etc.
Today you will learn to create an expanding search bar from an icon. Basically, there is a search icon and when you will click then it will expand to a search bar. The search icon has two elements, a circle and a line these two things make a complete search icon. On click, the line will hide and the circle becomes a box and expands. The search bar contains a cross button to close the bar and becomes the search icon again. The whole process has a cool and smooth animation.
So, Today I am sharing Search Bar Animation With CSS and jQuery. There I have used HTML to create the input, CSS for styling and creating shapes, jQuery to functioning. This is a cool and unique animated search input, which is ready to use. You can use this search bar on your website, for better design and user attraction.
If you are thinking now how this search bar animation actually is, then see the preview given below.
Preview Of Expanding Bar From Icon
See this video preview to getting an idea of how this animation looks like.
Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- Blend Modes Example
- Animated Navigation Menu
- Toast Message With Close Animation
- Form UI Validation Animation
Search Bar Animation With CSS and jQuery Source Code
Before sharing source code, let’s talk about it. First I have created a form as the main element and placed other items inside it. Inside the form, I have placed a text input <input type="text"> with ID/Class names and a button. The input is for the bar and the button to reset the bar. Also in the HTML file, I have linked other files like CSS, JS, and jQuery CDN.
Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS first I gave basic values like size, position, padding, margin, etc to all the elements. I have created the icons using CSS content:"" command, there I did not use any library or SVG shape. I used transform command to making changes and transition command to create animations.
jQuery handling here the toggle expand and close the search input in the program. There I have fetched the search input and button using document.getElementById command. And used input.classList.toggle command to expand and close. Left all other things you will understand after getting the codes, I can’t explain all in writing.
For creating this program you have to create 3 files. First file for HTML, second for CSS, and the third file for JavaScript. Follow the steps to creating this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Search Bar Animation | Webdevtrick.com</title> <link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Palanquin:400,100,200,300'> <link rel="stylesheet" href="style.css"> </head> <body> <form id="bar"> <input type="text" name="input" class="input" id="search-input"> <button type="reset" class="search" id="search-btn"></button> </form> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ 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 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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ body { background-color: #ff4747; color: #fff; margin: 0; } #bar { position: absolute; height: 50px; width: 300px; margin-left: 170px; top: 50%; left: 50%; transform: translate(-50%, -50%); } #bar.on { -webkit-animation-name: in-out; animation-name: in-out; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } input { box-sizing: border-box; width: 50px; height: 50px; border: 4px solid #ffffff; border-radius: 50%; background: none; color: #fff; font-size: 16px; font-weight: 400; font-family: Roboto; outline: 0; -webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s; transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } .search { background: none; position: absolute; top: 0px; left: 0; height: 50px; width: 50px; padding: 0; border-radius: 100%; outline: 0; border: 0; color: inherit; cursor: pointer; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; -webkit-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } .search:before { content: ""; position: absolute; width: 20px; height: 4px; background-color: #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); margin-top: 26px; margin-left: 17px; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .close { -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .close:before { content: ""; position: absolute; width: 27px; height: 4px; margin-top: -1px; margin-left: -13px; background-color: #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .close:after { content: ""; position: absolute; width: 27px; height: 4px; background-color: #fff; margin-top: -1px; margin-left: -13px; cursor: pointer; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .square { box-sizing: border-box; padding: 0 40px 0 10px; width: 300px; height: 50px; border: 4px solid #ffffff; border-radius: 0; background: none; color: #fff; font-family: Roboto; font-size: 16px; font-weight: 400; outline: 0; -webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s; transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s; -webkit-transition-delay: 0.4s, 0s, 0.4s; transition-delay: 0.4s, 0s, 0.4s; -webkit-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 |
// Code By Webdevtrick ( https://webdevtrick.com ) const input = document.getElementById("search-input"); const searchBtn = document.getElementById("search-btn"); const expand = () => { searchBtn.classList.toggle("close"); input.classList.toggle("square"); }; searchBtn.addEventListener("click", expand); |
That’s It. Now you have successfully created Search Bar Animation With CSS and jQuery, Expanding Bar From Icon. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
