<header>

	<a id="logo" href="http://www.javascriptkit.com"><img src="http://www.javascriptkit.com/jkincludes/jklogosmall.gif" /></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>

	<label for="search-terms" id="search-label"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAgCAMAAABJuvqBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA0NTZGMzIxRUNFQzExRTY5ODZERTAxMDA0RDc3N0Q3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA0NTZGMzIyRUNFQzExRTY5ODZERTAxMDA0RDc3N0Q3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDQ1NkYzMUZFQ0VDMTFFNjk4NkRFMDEwMDRENzc3RDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDQ1NkYzMjBFQ0VDMTFFNjk4NkRFMDEwMDRENzc3RDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7p5TyCAAABZVBMVEUIAAAAAAj///l3d3caAABvwv8AAA3o+f//+dv5////wm/b+f/Y9f+dPwgIP53/1I7/+eEkAABGDQA/CAD/25nLqHj/7MoiCAAQN19OrObd//+GgF1tncRvGgAADRo0AADw+f9QLhPT4vCdy+LjrE624fnov28IYboADTeTKwCSqcz/+cK/7P//4KITIkQkjtTs0ZP//9fw3NO28P9Gk8/f9f+SvN//7MIACD+Azf/swnX///UAABUNAAApX6gAFXsidb8IImj5250ACCJhuvPjqEgIInW2YRoIIlrMqZJ3alDw//+i3f8NRp0uEwjZ7PU/ndvPnVR6Nw3/7LaAMAh6xvArk9ddCADK+f9vCAAAOZ3//+zbnT/i07JOrOP5v2j1////+fD/+c0/AADKexW2XQh1xv+T0ewADUbYmT8Ab8KAGgD/9eXC7P+/ejfswm9EXXf58Nz/+egAAF0AFWgAAAD////z7oNeAAABEklEQVR42mIoIwowDBllhZ7MzMxa/viVCeTZloIAmx0PHmViIaUw4JaLUxkHb2mph7JCWWJsUGkpHzcuZSoMMEkB99LSMBzKDDVLS3Sg7KTsUvsI7Mp0k0v14aKupTaW2JVxlZaywkX5BZE4uJWJyJe6YFcGNEASLhpfypiGXZl2ZGmUFJQdnVpabIxdGVNKKWMAJ4SpxlKq7o0j3ILDS9lM2IGMokCWUgsfnJFlJV5aKlfA7OUHjC0JswScUW8gBI1SDWkGRgd2nAkpR1SRoZRRT8YUFL++PISTpblsaamjKuHU6yRcWpqRTjiR57OUljqHElTGFMNQWppFOMtYZzIwxhGRs5iMlDiHXq7HCQACDACYnQfQhh7EZgAAAABJRU5ErkJggg==" /></label>

</header>

 
<p style="position:absolute;bottom:10px">From Tutorial: <a href="http://www.javascriptkit.com/dhtmltutors/css-animated-search-form.shtml" target="_blank">Creating a slick, animated Full Screen Search Form with CSS3 and JavaScript</a></p>

<div id="searchcontainer">
	<form id="search" action="#" method="post">
		<input type="text" name="search-terms" id="search-terms" placeholder="Enter search terms...">
		<div>Press Enter to Search</div>
	</form>
</div>

body {
  padding-top: 70px;
}

header {
  position: fixed;
  width: 100%;
  display: flex;
  top: 0;
  left: 0;
  justify-content: space-between;
  align-items: center;
  /* center flex items vertically */
  background: white;
  padding: 10px 5px;
  font: bold 16px 'Bitter', sans-serif;
  /* use google font */
}

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

header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: auto;
  /* right align this flex child */
  margin-right: 10px;
}

header ul li {
  display: inline;
}

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

header #search-label {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  /* center flex items vertically */
  width: 60px;
  height: 40px;
  z-index: 100;
}

div#searchcontainer {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: block;
  background: purple;
  left: -100%;
  /* initially position search container out of view */
  top: 90px;
  /* shift container downwards so the header is still visible when search is shown */
  padding-top: 50px;
  opacity: 0;
  cursor: crosshair;
  text-align: center;
  font: bold 16px 'Bitter', sans-serif;
  /* use google font */
  -webkit-transform: scale(.9) translate3d(-0, -50px, 0);
  transform: scale(.9) translate3d(-0, -50px, 0);
  -webkit-transition: -webkit-transform .5s, opacity .5s, left 0s .5s;
  transition: transform .5s, opacity .5s, left 0s .5s;
}

div#searchcontainer div {
  padding: 5px;
  color: white;
}

div#searchcontainer form {
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  -webkit-transition: all .5s 0s;
  transition: all .5s 0s;
}

div#searchcontainer form input[type="text"] {
  width: 90%;
  top: 0;
  left: 0;
  z-index: 99;
  padding: 10px;
  border: none;
  border-bottom: 2px solid gray;
  outline: none;
  font-size: 3em;
  background: #eee;
}

div#searchcontainer.opensearch {
  left: 0;
  opacity: 1;
  -webkit-transform: scale(1) translate3d(0, 0, 0);
  transform: scale(1) translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform .5s, opacity .5s, left 0s 0s;
  transition: transform .5s, opacity .5s, left 0s 0s;
}

div#searchcontainer.opensearch form {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition: all .5s .5s;
  transition: all .5s .5s;
}

@media (max-width: 480px) {
  div#searchcontainer form input[type="text"] {
    width: 95%;
  }
}

var ismobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null
var touchorclick = (ismobile)? 'touchstart' : 'click'
var searchcontainer = document.getElementById('searchcontainer')
var searchfield = document.getElementById('search-terms')
var searchlabel = document.getElementById('search-label')

searchlabel.addEventListener(touchorclick, function(e){ // when user clicks on search label
	searchcontainer.classList.toggle('opensearch') // add or remove 'opensearch' to searchcontainer
	if (!searchcontainer.classList.contains('opensearch')){ // if hiding searchcontainer
		searchfield.blur() // blur search field
		e.preventDefault() // prevent default label behavior of focusing on search field again
	}
	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
	searchcontainer.classList.remove('opensearch')
	searchfield.blur()
}, false)