Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Form CSS: Here

Animated Slide In Search Form

Author: Dynamic Drive

This compact search form starts out as only a small search icon on the page to conserve space. Clicking on the icon slides in and overlays a large search form using the smoothness of CSS3 transitions and transform. On mobile devices, the virtual keyboard is automatically brought up at this point. Clicking anywhere on the page dismisses the search form.

This example integrates the search icon inside a simple relatively positioned header with 3 main elements- a logo on the very left, followed by a UL menu and the search icon on the far right. The icon is from IcoMoon.

Demo:

The CSS:

The "search" icon uses a font icon from IcoMoon. Download the below zip file, and unzip its contents to a sub directory called "icomoon". Then, make sure the reference to style.css inside this package is correct by the above code:

<link rel="stylesheet" href="icomoon/style.css" />

The HTML and JavaScript:

And that's a wrap! The JavaScript serves to intelligently set focus on the search form when it's fully revealed, and blur it when the user taps anywhere on the page. This has the added effect of bringing up/ dismissing the virtual keyboard on mobile devices.

Code Info

Rate this code:

Date Posted: 02/14/2017

Revision History: None

Usage Terms: Click here

Copyright 2006-2016 Dynamic Drive