qiita 등에 구현되어 있는 스마트폰용 검색 박스를 html과 css만으로 만든다.

이번에는 qiita의 스마트 폰 버전에 구현되어있는 탭하면 검색 필드가 나오는 녀석을 만들려고합니다. 햄버거 메뉴를 만드는 방법을 응용하여 만들었습니다. 햄버거 메뉴를 만드는 방법은 다음을 참고했습니다.

CSS만으로 간단! 햄버거 메뉴 만드는 법(스마트폰 대응)

완성도

쁘띠 홍보

공개 일기 라는 웹 앱을 만들었습니다. 이름 그대로 매일의 일기를 공개할 수 있는 앱입니다(공개하지 않는 것도 가능). 현재 이용자가 자신밖에 없습니다. 사용하십시오. 제발 😭. 자세히 알고 싶은 분은 ↓
쉽게 일기가 공개될 수 있는 앱 '공개일기'를 출시했다.

HTML

html

<div id="serch-drawer">
    <input id="serch-input" type="checkbox" class="nav-unshown">
    <label id="nav-open" for="serch-input"><img src="/assets/虫眼鏡.png" class="glass"></label>
    <label class="nav-unshown" id="nav-close" for="serch-input"></label>
    <div id="serch-content">
     <form action="/diaries", method="get", class="serch">
     <input type="text" name="search" class="serch_bar", placeholder="キーワード検索">
     <input type="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-open span, #nav-open span:before, #nav-open span:after {
    position: absolute;
    height: 3px;/*線の太さ*/
    width: 25px;/*長さ*/
    border-radius: 3px;
    background: #555;
    display: block;
    content: '';
    cursor: pointer;
  }
  #nav-open span:before {
    bottom: -8px;
  }
  #nav-open span: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: .3s ease-in-out;
  }

  /*中身*/
  #serch-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;/*最前面に*/
    width: 100%;/*右側に隙間を作る（閉じるカバーを表示）*/
    height: 50px;
    background: #fff;/*背景色*/
    transition: .3s ease-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: 6px 0 25px rgba(0,0,0,.15);
  }
  .glass {
    margin: 5px;
    width: 30px;
    height: 30px;
  }

   /*ここからは検索フォーム自体のデザインです。検索フォームのデザインは自分でするという方は飛ばしてください。*/
  .serch {
    position: absolute;
    margin: 0 250px 0 100px;
  }
.serch_bar {
  position:absolute; 
  height: 3.0em;
  border-radius: 20px 0 0 20px;
  border: 1px solid #999;
  outline : none;
  padding: 0 0 0 13px;
  margin: 5px 0;
}
.serch_button {
  position: absolute;
  left:170px; 
  width: 3.5em;
  height: 3.15em;
  border-radius: 0 20px 20px 0;
  background: #82aaaa;
  color: #fff;
  border: none;
  margin: 5px 0;
}

햄버거 메뉴의 코드를 변경했을 뿐인데 밖에 원하지 않는 코드가 있을지도 모릅니다. 만약 있으면 코멘트 부탁드립니다.

완성

이것으로 완성입니다. 하나하나의 코드를 해설해 가면 길어져 버린다(면 k...) 하고 있는 것은 햄버거 메뉴와 거의 함께 있으므로 신경이 쓰이는 분은,
CSS만으로 간단! 햄버거 메뉴 만드는 법(스마트폰 대응) 을 참조하십시오.
여기까지 봐 주셔서 감사합니다.