よくあるフォーカスされてるときだけ表示される検索バーの作り方

よくブログとかで画面の右上とかにある、フォーカスされてるときだけ表示される検索バーあるじゃないですか。
あれの作り方。

仕組みは簡単で、検索バーのどこかにマウスが乗ったときと、テキストフォームがフォーカスされてるときには幅などを指定して、通常時は0にしておくことで見えなくする。

DEMO

まずHTML。

<div id="search-box">
  <form action="/" id="search" name="search" method="get">
    <label id="search-label" for="search-text">サイト内検索</label>
    <input id="search-text" type="text" name="s" />
    <input id="search-submit" type="image" src="ico_search.svg" name="submit" />
  </form>
</div>

actionとかmethodとか、送信ボタンはお好みで。今回は虫眼鏡型のアイコンを送信ボタンにしてみた例。
きわめて単純。

次にスタイル定義。

/* ここら辺は見た目に関する設定。 */

input {
  line-height: normal;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#search-box {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 30px;
  overflow: hidden;
  vertical-align: top;
  border-radius: 3px;
  background: #000;
}

#search-submit {
  background: #000;
  padding: 5px;
  border-radius: 0 3px 3px 0;
  height: 30px;
  width: 30px;
  vertical-align: top;
  border: none;
}
#search-label {
  color: #fff;
  vertical-align: middle;
  padding: 0 5px;
}

#search-text {
  border: 1px solid #000;
  height: 30px;
  vertical-align: top;
  border-radius: 0;

  /* ここから下がコアな部分。 */

  /* 標準時は幅とパディング等をを0にしておくことで、表示しない。 */
  width: 0;
  padding: 0;
  margin: 0;
  
  /* アニメーションにしたければtransitionで秒数を指定する。 */
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  -ms-transition: 0.2s;
  transition: 0.2s;
}

/* フォーカスされてるときはテキストフォームの幅、パディングを指定、通常時は両方0で指定する。 */
#search-text.hover,
#search-text.focus {
  width: 400px;
  padding: 5px;
}

最後にフッター部分に、フォーカス時やホバー時、あるいはそれらが外れた時にテキストフォームのクラスを変更するためのJavaScriptを記述。

<script src="jquery.js"></script>
<script>
(function($) {

  // 検索ボタンが押された際、フォームが空欄ならテキストフォームをfocusする。
  // （空の値送信対策・スマフォ対策）
  $('#search').submit(function(){
    var $text = $('#search-text');
    if( $text.val() == '' ) {
      $text.focus();
      return false;
    }
    return true;
  });

  // ホバー時の動き。
  $('#search-box').hover(function(){
    $('#search-text').addClass('hover');
  }, function() {
    $('#search-text').removeClass('hover');
  });

  // フォーカス時の動き。
  $('#search-text').focus(function(){
    $(this).addClass('focus');
  }).blur(function(){
    $(this).removeClass('focus');
  });
})(jQuery);
</script>

以上、車輪の再発明終わり。