さぁ!検索しよう!

jQueryは使わずに、CSS3のみで開閉動作を実装する方法を解説します。

前回の記事では、jQueryを使って検索フォームに開閉するアニメーションを実装しましたが、今回は一切使用せずCSS3のみで実装するためスマートフォンでも快適に動作します。

始めにデモをご覧ください。

完成デモ

テキストフォームをクリックするとアニメーションしながら開き、テキストフォーム以外のどこかをクリックすると、アニメーションしながら閉じることが確認できます。

続いて、各ソースコードを解説します。

始めにHTMLです。

HTML

<form method="get" id="searchform" action="#" class="clearfix">
<div>
<input type="text" value="" id="keyword" />
<input type="submit" id="submit" value="&#xf002;" />
</div>
</form>

HTMLは検索フォームのマークアップのみです。

次にCSSです。

CSS

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:after {
    content:"";
    clear:both;
    display:block;
}

#searchform { 
  margin:0 auto;
  width:300px;
  position:relative;
}

#keyword,
#submit {
  border:none;
  padding:10px;
  position:absolute;
}

#keyword {
  border-radius:10px 0 0 10px;
  background:#dfdfdf;
  right:20%;
  transition:all 0.3s;
  width:20%;
}

#keyword:focus {
  width:80%;
}

#submit {
  border-radius:0 10px 10px 0;
  background:#0E7AC4;
  color:#fff;
  font-family:FontAwesome;
  right:0;
  width:20%;
}
  • #keyword#submitの両方にrightプロパティを指定している訳は、どちらも右端に配置することで、アニメーションの際に、テキストフォームが右から左へ開くようにするためです。
  • テキストフォームの通常時の横幅を20%にしています。後にクリックすると横幅を伸ばすためです。
  • #keywordtransition:all 0.3s;と指定することで、アニメーションのスピードを定義しています。
  • #keyword:focus { width:80%; }と記述することで、テキストフォームがクリックされたときに、横幅が20%から80%に伸びます。

以上です。