今回はqiitaのスマホ版に実装されているタップすると検索フィールドが出てくるやつを作ろうと思います。ハンバーガーメニューの作り方を応用して作りました。ハンバーガーメニューの作り方は以下を参考にしました。
CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
完成図
プチ宣伝
公開日記というwebアプリを作りました。名前の通り毎日の日記を公開できるアプリです（公開しないことも可能）。現在利用者が自分しかいません。使ってください。お願いします😭。詳しく知りたい方は↓
簡単に日記が公開できるアプリ「公開日記」をリリースした。
https://public-diary.herokuapp.com/
HTML
html
<divid="serch-drawer"><inputid="serch-input"type="checkbox"class="nav-unshown"><labelid="nav-open"for="serch-input"><imgsrc="/assets/虫眼鏡.png"class="glass"></label><labelclass="nav-unshown"id="nav-close"for="serch-input"></label><divid="serch-content"><formaction="/diaries",method="get",class="serch"><inputtype="text"name="search"class="serch_bar",placeholder="キーワード検索"><inputtype="submit"value="検索"class="serch_button"></form></div></div>虫眼鏡の画像は好きなものをダウンロードしてください。
自分は虫眼鏡の画像の中からイラストをダウンロードしました。
CSS
CSS
#serch-drawer{position:relative;}/*チェックボックス等は非表示に*/.nav-unshown{display:none;}/*アイコンのスペース*/#nav-open{display:inline-block;width:30px;height:22px;vertical-align:middle;}/*ハンバーガーアイコンをCSSだけで表現*/#nav-openspan,#nav-openspan:before,#nav-openspan:after{position:absolute;height:3px;/*線の太さ*/width:25px;/*長さ*/border-radius:3px;background:#555;display:block;content:'';cursor:pointer;}#nav-openspan:before{bottom:-8px;}#nav-openspan:after{bottom:-16px;}/*閉じる用の薄黒カバー*/#nav-close{display:none;/*はじめは隠しておく*/position:fixed;z-index:99;top:0;/*全体に広がるように*/left:0;width:100%;height:100%;background:black;opacity:0;transition:.3sease-in-out;}/*中身*/#serch-content{overflow:auto;position:fixed;top:0;left:0;z-index:9999;/*最前面に*/width:100%;/*右側に隙間を作る（閉じるカバーを表示）*/height:50px;background:#fff;/*背景色*/transition:.3sease-in-out;/*滑らかに表示*/-webkit-transform:translateY(-105%);transform:translateY(-105%);/*左に隠しておく*/}/*チェックが入ったらもろもろ表示*/#serch-input:checked~#nav-close{display:block;/*カバーを表示*/opacity:.5;}#serch-input:checked~#serch-content{-webkit-transform:translateY(0%);transform:translateY(0%);/*中身を表示（右へスライド）*/box-shadow:6px025pxrgba(0,0,0,.15);}.glass{margin:5px;width:30px;height:30px;}/*ここからは検索フォーム自体のデザインです。検索フォームのデザインは自分でするという方は飛ばしてください。*/.serch{position:absolute;margin:0250px0100px;}.serch_bar{position:absolute;height:3.0em;border-radius:20px0020px;border:1pxsolid#999;outline:none;padding:00013px;margin:5px0;}.serch_button{position:absolute;left:170px;width:3.5em;height:3.15em;border-radius:020px20px0;background:#82aaaa;color:#fff;border:none;margin:5px0;}ハンバーガーメニューのコードを変更しただけなのでもしかしたらいらないコードがあるかもしれないです。もしあったらコメントお願いします。
完成
これで完成です。一つ一つのコードを解説していくと長くなってしまう（めんどk...)しやっていることはハンバーガーメニューとほぼいっしょなので気になる方は、
CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）を見てください。
ここまで見てくれてありがとうございました。