Sliding searchbox with full page overlay effect

Question

I would like implement on my own website this kind of search box (click on "cerca" in the top menu): http://www.solidstudio.it/#.

How works this sliding horizontal effect on click to display the searchform combined with the fullpage overlay effect?

Do you know some tutorials for this or could you help me to build?

Thank you so much in advance, Démian P.

Answer 1

jsBin demo

I like it more with hover :)

HTML:

  <ul id="nav">
       
    <li><a href="#">portfolio. </a></li>
    <li><a href="#">agenzia. </a></li>
    <li><a href="#">contatti. </a></li>
    <li id="search"><a href="#">cerca.</a><input type="text" placeholder="Entra un termine" /></li>
    <li></li>

  </ul>

CSS:

/* OVERLAY */

#overlay{
  position:absolute;
  z-index:9; /*input is 10*/
  display:none;
  width:100%;
  height:100%;
  background:url(http://www.solidstudio.it/wp-content/themes/solid/css/images/mask_black.png);
}

/* PAGE */
a{text-decoration:none;}

#nav{
  list-style:none;
  padding:0;
}
#nav li{
  position:relative;
  float:left;
  padding:40px 5px;
  cursor:pointer;
}
#nav li:hover{
  background:#000;
}
#nav li:hover a{
  color:#fff;
  border-bottom:1px solid #fff;
}
#nav a{
  display:block;
  border-bottom:1px solid #000;
  width:100px;
  margin:10px;
  color:#000;
  padding-bottom:10px;
}
li#search{
  z-index:10;
}
#nav input{
  display:none;
  position:absolute;
  top:50px;
  left:15px;
  background:transparent;
  border:none;
  border-bottom:1px solid #fff;
  height:31px;
  width:230px;
  color:#0ff;
  font-size:21px;
  font-family:Century Gothic, sans-serif;
  font-weight:400;
}

jQuery:

$('#search').on('mouseenter mouseleave', function( e ){
  var mEnt      = e.type=='mouseenter';
  
  var opacity   = mEnt ? 1      : 0      ;
  var width     = mEnt ? 250    : 100    ;
  var show_hide = mEnt ? 'show' : 'hide' ;
  
  $(this).stop().animate({width: width}, 400);
  $('a', this).stop().fadeTo(400, !opacity);
  $('input', this).stop().fadeTo(400,opacity);
  $('#overlay').stop().fadeTo(400, opacity, function(){
    $(this)[show_hide]();
  });
  
});