Maybe you have noticed the little adjustments that we did to our theme lately here on Codrops. One of the things we thought might be nice to change is the search input. We’ve put it from the sidebar into the header and we use a common effect where you have to click to expand the input.
Summarized, this is what we want the search component to do:
- Initially, we only want to show a button with a search icon.
- When clicking on the icon, we want a search input to slide out.
- The component should be fluid, meaning that we can use it in a responsive context.
- When we type something we want to be able to submit the form by either hitting enter or clicking on the search icon.
- If the input is expanded and empty, and we click on the search icon, we want the input to close again.
- We also want the input to close when we click outside of the search bar, be it empty or not.
- Without JavaScript, we want the search bar to be shown expanded.
- For a smoother experience on touch devices, we’ll also want to add support for touch events.