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]();
});
});