jquery - フルページオーバーレイ効果のあるスライド式検索ボックス

Question

この種の検索ボックスを自分のWebサイトに実装したいと思います（トップメニューの「cerca」をクリックします）： http： //www.solidstudio.it/#。

フルページオーバーレイ効果と組み合わせて検索フォームを表示するためのクリック時のこのスライド水平効果はどのように機能しますか？

このためのチュートリアルをいくつか知っていますか、それとも私が構築するのを手伝ってくれませんか？

よろしくお願いします、DémianP。

Answer 1

jsBinデモ

ホバーでもっと好きです:)

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

これは単なるスライド効果であり、ユーザーがテキストボックス内でマウスをフォーカスするとすぐに、jqueryはアニメーションでテキストボックスの幅を広げます。ここに例があります

あなたのテキストボックスがこれだとしましょう：

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

jqueryコードは次のようになります

$('#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は、一時値を格納するために使用されます

Answer 3

このようなもの？http://jsfiddle.net/McELm/

確かにあなたはもっとスタイルを改善することができます。

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

});