Development Downloads

Expanding Search Bar Using Pure CSS Free Download

expandingsearchbar-designdecoding

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:

  1. 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.
  2. 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.
  3. 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.

Like what your see, Follow Us on Social Media @DesignDecoding
About the author

Jibari Daniels

I am a highly innovative Graphic Designer and Web Developer with years of experience in the field, combined with an infinite imagination, creativity and knowledgeable understanding of the current industry standards. I created Design Decoding in 2014 as a way to give back design and development material and content to the community

Leave a Reply

Your email address will not be published. Required fields are marked *