Lately, I have been looking at a few search bars on websites. I came across a really good search bar that was developed by Codrops. I decided to play of the concept of their nice expanding search bar and create my own expanding search bar using pure CSS.
When designing a website the search bar usually gets the littlest attention. Most of the time it is displayed as a boring search area with little to no excitement. I decided to change this concept by using JQuery to display a expanding search bar using pure CSS. By working with codrops I developed a expanding search bar using pure CSS this search bar is fully functional and can be easily inserted in any website.
The function of the search can be explained in 3 easy parts:
- By default the search icon initially will be closed. I displayed the search area as a icon so it could fit cleanly and easily on a navigation menu.
- Once the button is clicked the input area will slide out. If nothing is filled in or you click outside the input area the search field will slide back in.
- If the search field is not empty and you want to perform a search, simply click the search icon or hit enter.
All this is accomplished by the files below you can simple watch the demo or click the download button below and get the full expanding search bar using pure CSS files.