Advertise here

Mobile Friendly and Responsive Expanding Search Bar

June 26, 2013     24167     Mobile Responsive
Mobile Friendly and Responsive Expanding Search Bar

A tutorial on how to create a mobile-friendly and responsive expanding search bar.

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 text input to slide out.
  • The component should be fluid, meaning that we can use it in a responsive context.
  • For a smoother experience on touch devices, we’ll also want to add support for touch events.
  • 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.

Related Plugins

Latest Plugins