読者です 読者をやめる 読者になる 読者になる

ゴミ溜め@技術系日常系雑文

主にWeb技術やそのほかつまづいたこととか引っかかって調べたこととかをまとめてます。

はてなダイアリーから引っ越しました。)

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

jQuery HTML

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

仕組みは簡単で、検索バーのどこかにマウスが乗ったときと、テキストフォームがフォーカスされてるときには幅などを指定して、通常時は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>

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