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

Answer 2

it is just a sliding effect , as soon as user mouse focus inside textbox , jquery is increasing the width of the textbox with a animation. here is an example

let's say your textbox is this :

<input type="text" id="textbox" style="width: 100px;" />

jquery code will look like this

$('#box').focus(function()
{
$(this).attr('data-default', $(this).width());
$(this).animate({ width: 150 }, 'slow');
}).blur(function()
{
var w = $(this).attr('data-default');
$(this).animate({ width: w }, 'slow');
});

data-default is used to store temp value

Answer 3

Something like this? http://jsfiddle.net/McELm/

Sure you can improve more the style.

html:

<a href="#">search</a>
<form action="#" type="post">
  <input type="text" class="search" value="search" />
</form>

css:

* {
  font-family:Arial, Helvetica, sans-serif;
}
a {
  position:relative;
  background:#000;
  color:#FFF;
  text-decoration:underline;
  font-size:12px;
  height:20px;
  padding:5px 20px;
}

form {
  background:#000;
  position:relative;
  padding:5px 20px;
  margin:0;
  height:20px;
  width:38px;
  display:none;
}

form input.search {
  position:absolute;
  border:none;
  background:#000;
  color:#FFF;
  font-size:12px;
  height:20px;
  width:38px;
  text-decoration:underline;
  margin:0;
  padding:0;
}

js:

$('a').click(function(e){
  e.preventDefault();

  $(this).hide();

  $('form, input.search').show().animate({width:'200px'},300,   function(){
    $('input.search').focus();
  });

});