韓国留学、ベルリン短期ワーホリ、転職、Webデザイン、英語勉強、旅行、食べ物、ディズニーなど

スマホサイト用・クリックすると現れる検索フォーム

現在制作中のブログサイトで、スマホ画面の場合、「検索」ボタンをクリックすると、検索フォームが出てくるというものを作りました。

完成はこちらです。

ちなみに、こちらのGIF画像は、「GIPHY」というMac用のアプリで作成しました。
※「GIPHY」の使い方については、「デモを見せるのに便利!「GIPHY」で画面の動きを録画してGIF画像を作る方法」の記事をご覧ください。

1、HTML

<!-- トグルボタン(検索) ここから-->
<div id="searchbtn">
 <button type="button"><i class="fa fa-search"></i><span>検索</span></button>
</div>
<!-- トグルボタン(検索) ここまで-->

<div class="search-area" id="search">
 <form action="#" method="post" class="wrapper-simple">
  <input type="search" name="q" value="" placeholder="キーワードから記事を探す" class="search-area__text">
 </form>
 <div id="searchbtn-cancel" class="search__cancel">キャンセル</div>
</div>

「トグルボタン(検索)」という部分は、初めから表示されている、虫眼鏡のアイコンと「検索」という文字のボタン部分です。
後半は、上記のボタンをクリックすると出てくる、検索フォームの部分です。

スポンサーリンク

2、JS

//「検索」ボタンを押したら、検索フォームを表示する
$(function(){
  $("#searchbtn").click(function(){
    $("#search").slideToggle();
  });
});

//「キャンセル」を押したら、検索フォームを非表示にする
$(function(){
  $("#searchbtn-cancel").click(function(){
    $("#search").slideToggle();
  });
});

JSは、2つの動きを記述しています。

3、CSS

※Sassで記述しています。

/*トグルボタン(検索)*/
#searchbtn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  border-left: 1px solid #eee;
  padding-left: 10px;
}
#searchbtn .fa {
  font-size: 24px;
  color: #999;
}
#searchbtn span {
  display: block;
  font-size: 10px;
  padding-top: 1px;
}

/*検索フォーム*/
.search-area {
  display: none; /*初期状態は非表示(トグルボタンで表示)*/
}
.search-area {
  width: 100%;
  padding: 8px 0 8px 8px; 
  background: #f5f5f5;
  border-bottom: 1px solid #e7e7e7;
  @include box-sizing(border-box);
  position: relative;
}
.search-area form {
  position: relative;
}
.search-area__text {
  padding: 0 8px 0 25px;
  width: 100%;
  position: relative;
  display: inline-block;
  background: #fff;
  height: 30px;
  border: 1px solid #ddd;
  @include border-radius(3px);
  @include box-sizing(border-box);
  font-size:12px;
  font-size:1.2rem;
  color: #333;
  &:focus {
    outline: none;
  }
}
.wrapper-simple:before {
  content: " \f002"; /*虫眼鏡のアイコン*/
  font-family: FontAwesome;
  position: absolute;
  left: 8px;
  top: 3px;
  color: #aaa;
  z-index: 1;
}

/*検索フォームとキャンセルボタンを横並びにする*/
.search-area form {
  float: left;
  width: 78%;
}
.search__cancel {
  float: right;
  width: 22%;
  text-align: center;
  font-size: 11px;
  font-size: 1.1rem;
  padding-left: 3px;
  padding-right: 8px;
  line-height: 30px;
  @include box-sizing(border-box);
  color: #9445D9;
}
.search-area {
  @include clearfix;
}

検索フォームは、CSSでdisplay:none;にしておいて、JSで表示・非表示を切り替えています。
また、検索フォームの中にある虫眼鏡のアイコンは、form要素の:before擬似要素で、配置しています。
ちなみに、HTMLで、input要素のplaceholder属性で、検索フォームの中にあらかじめ表示しておく文字を指定していますが(ここでは、「キーワードから記事を探す」と指定)、この文字の色がブラウザで違うというので、統一させるためのCSSを書きました。

/*フォームのplaceholderの色を変え、様々なブラウザで統一させる*/
$placeholderColor: #999;
/* Webkit */
::-webkit-input-placeholder {
    color: $placeholderColor;
    opacity: 1;
}
/* Firefox 18 以前 */
:-moz-placeholder {
    color: $placeholderColor;
}
/* Firefox 19 以降 */
::-moz-placeholder {
    color: $placeholderColor;

    /* Firefox 19 以降のデフォルトでは */
    /* color ではなく opacity で色合いを調整しているため */
    /* 文字色を指定する場合、opacity を 1 にする必要がある */
    opacity: 1;
}
/* IE 10 以降 */
:-ms-input-placeholder {
    color: $placeholderColor;
}
/* CSS4では以下のような名前の擬似クラスになるらしい */
/* おそらく今のところ対応ブラウザはない */
:placeholder-shown {
    color: $placeholderColor;
}

こちらのコードは、以下の参考サイトに載っているコードを使わせていただきました。
【参考サイト】 
placeholder のブラウザごとの違い&その対処法など

スポンサーリンク

内容をご確認の上、「送信」ボタンを押してください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください