CodePen

HTML

            
              <div class="container">
  

    
  <div class="form">
    <input type="search" class='search' placeholder='Search'/>
    <input type="submit" value='Search' class='submit'/>
  </div>
<div class="find">Search</div>
</div>
            
          
!

CSS

            
              .container{
  width:900px;
  position:relative;
}

.find{
  height:100px;
  line-height:100px;
  background:lightblue;
  text-align:center;
  width:100%;
  position:absolute;
  cursor:pointer;
}
.form{
  top:0;
  width:100%;
  height:100px;
  text-align:center;
  line-height:100px;
  display:block;
  position:absolute;
  transition:all .5s;
}
.search{
  width:400px;
  height:50px;
  font-size:30px;
  
}
.submit{
  height:55px;
  padding:0 20px;
  
} 

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('.find').click(function(){
  if($('.form').css('top') == '0px'){
    $('.form').css('top','100px');
    $('.search').focus();
  }else{
    $('.form').css('top','0');
  }

});
$('.search').blur(function(){
  if($(this).val() == '')$('.form').css('top',0);
});

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................