Dynamic Drive CSS Library- Animated Slide In Search Form

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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:

<link href="http://fonts.googleapis.com/css?family=Bitter⊂=latin" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="icomoon/style.css" />

<style>

header#topheader{
  position: relative; /* change to "fixed" if desired */
  width: 100%;
  display: flex;
  justify-content: space-between; /* space flex items evenly horizontally */
  align-items: center; /* center flex items vertically */
  background: lightyellow;
  padding:10px 5px;
	font: bold 16px 'Bitter', sans-serif; /* use google font */
}

header#topheader, header#topheader *{
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

header#topheader a#logo img{
  max-width: 60px;
  height: auto;
}


header#topheader ul{
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: 50px;
}

header#topheader ul li{
  display: inline;
}

header#topheader ul li a{
  text-decoration: none;
  padding: 5px;
}

header#topheader form{
  position: absolute;
  width: 60px; /* initial width of form. Should equal #search-label width */
  height: 100%;
  max-height: 80px; /* maximum height of search form */
  z-index: 100;
  display: block;
  overflow: hidden;
  right: 0;
  top: 50%; /* center form vertically */
  -webkit-transform: translate3d(0, -50%, 0); /* center form vertically */
  transform: translate3d(0, -50%, 0); /* center form vertically */
  -webkit-transition: width 0s .5s; /* collapse width after .5s delay */
  transition: width 0s .5s; /* collapse width after .5s delay */
}

header#topheader form input[type="text"]{
  position: absolute;
  right: 60px; /* Should equal #search-label width */
  width: 100%;
  width: calc(100% - 60px); /* Should equal 100% - #search-label width */
  top: 0;
  left: 0;
  height: 100%;
  z-index: 99;
  padding: 10px;
  border: none;
  border-bottom: 2px solid gray;
  outline: none;
  font-size: 2em;
  background: #eee;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
  -webkit-transition: -webkit-transform .5s;
  transition: transform .5s;
}

header#topheader #search-label{
  cursor: pointer;
  float: right;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; /* center flex items vertically */
  width: 60px; /* width of search label */
  height: 100%;
  z-index: 100;
  background: lightyellow;
}

header#topheader #search-label span{
  font-size: 1.2em; /* search font icon size */
}

header#topheader form.opensearch{
  width: 450px; /* width of search form when opened. Try 100% */
  transition: none;
}

header#topheader form.opensearch input[type="text"]{
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

@media (max-width: 480px){
  header#topheader form.opensearch{
    width: 100%;
  }
}

</style>

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:

<header id="topheader">

	<a id="logo" href="http://www.dynamicdrive.com"><img src="http://www.dynamicdrive.com/ddincludes/ddlogov2.png" /></a>


	<ul>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
		<li><a href="#">Item 4</a></li>
	</ul>

  <form id="search" action="#" method="post">
		<input type="text" name="search-terms" id="search-terms" placeholder="Enter search terms...">
		<label for="search-terms" id="search-label"><span class="icon-search"></span></label>
	</form>

</header>


<script>
// Script should follow markup above
// CSS classList pollyfill: https://github.com/remy/polyfills/blob/6e87470526c496c0fc53fa87ed5a825eff61f1f3/classList.js
;(function () {

if (typeof window.Element === "undefined" || "classList" in document.documentElement) return;

var prototype = Array.prototype,
    push = prototype.push,
    splice = prototype.splice,
    join = prototype.join;

function DOMTokenList(el) {
  this.el = el;
  // The className needs to be trimmed and split on whitespace
  // to retrieve a list of classes.
  var classes = el.className.replace(/^\s+|\s+$/g,'').split(/\s+/);
  for (var x = 0; x < classes.length; x++) {
    push.call(this, classes[x]);
  }
};

DOMTokenList.prototype = {
  add: function(token) {
    if(this.contains(token)) return;
    push.call(this, token);
    this.el.className = this.toString();
  },
  contains: function(token) {
    return this.el.className.indexOf(token) != -1;
  },
  item: function(index) {
    return this[index] || null;
  },
  remove: function(token) {
    if (!this.contains(token)) return;
    for (var x = 0; x < this.length; x++) {
      if (this[x] == token) break;
    }
    splice.call(this, i, 1);
    this.el.className = this.toString();
  },
  toString: function() {
    return join.call(this, ' ');
  },
  toggle: function(token) {
    if (!this.contains(token)) {
      this.add(token);
    } else {
      this.remove(token);
    }

    return this.contains(token);
  }
};

window.DOMTokenList = DOMTokenList;

function defineElementGetter (obj, prop, getter) {
    if (Object.defineProperty) {
        Object.defineProperty(obj, prop,{
            get : getter
        });
    } else {
        obj.__defineGetter__(prop, getter);
    }
}

defineElementGetter(Element.prototype, 'classList', function () {
  return new DOMTokenList(this);
});

})();

// Main Expand Search code

;(function(){
	var searchform = document.getElementById('search')
	var searchfield = document.getElementById('search-terms')
	var searchlabel = document.getElementById('search-label')
	var focustimer
	
	var ismobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null
	var touchorclick = (ismobile)? 'touchstart' : 'click'
	 
	searchlabel.addEventListener(touchorclick, function(e){ // when user clicks on search label
			clearTimeout(focustimer)
	    searchform.classList.toggle('opensearch') // add or remove 'opensearch' to searchcontainer
	    if (!searchform.classList.contains('opensearch')){ // if hiding searchform
	        searchfield.blur() // blur search field
	    }
			else{
				focustimer = setTimeout(function(){
					searchfield.focus() // focus search field
				}, 500)
			}
			e.preventDefault() // disable default label action
	    e.stopPropagation() // stop event from bubbling upwards
	}, false)
	 
	searchfield.addEventListener(touchorclick, function(e){ // when user clicks on search field
	    e.stopPropagation() // stop event from bubbling upwards
	}, false)
	 
	document.addEventListener(touchorclick, function(e){ // when user clicks anywhere in document
	    searchform.classList.remove('opensearch')
	    searchfield.blur()
	}, false)
})();

</script>

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

Your Comments