Mobile Friendly and Responsive Expanding Search Bar

samuel Mobile 204 , , , , ,

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 Post

Here is a jQuery plugin for showing the latest tweets about a certain word or phrase. This plugin use jQuery Read more

Colortip is a simple jQuery tooltip plugin. It is going to convert the title attributes of elements withing your page, Read more

Tabs are easy to implement and can be built to work with your existing markup. This tutorial will walk through Read more

A responsive table to compare and filter through multiple products by using css and jQuery. A time-saver comparison table, specifically designed Read more

jQuery Pinterest Pin It Plugin looks for all images, and wrap it inside a container that come with a pinterest Read more

A tutorial about creating cool science slider with bubles by using css and javascript. 

A tutorial about creating animated e-commerce shop card by using html, css and javascript.

A tutorial about creating simple, interactive resource that can be used to provide a virtual tour of your product.