検索フォーム付きドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ドロワーメニュー

検索フォーム付きドロワーメニューの作り方

検索フォーム付きドロワーメニューをHTML・CSS・JavaScriptだけで作る方法を紹介します。ボタンをクリックすると画面の端からドロワーメニューが表示され、その中に検索フォームを配置できるサンプルです。ヘッダーやナビゲーションに検索機能を追加したい場合にも利用できます。

このサンプルでは、検索フォームをドロワーメニュー内へまとめて配置しているため、通常時は画面をすっきり見せながら必要なときだけ検索フォームを表示できます。レスポンシブデザインにも適しており、スマートフォンやタブレットでも使いやすいUIを実現できます。

HTMLで画面構成、CSSでドロワーメニューやフォームのデザイン、JavaScriptで開閉処理を実装しています。ライブラリを使わずに作成できるため、Webサイトや管理画面、ブログ、ポートフォリオなどへそのまま組み込みやすく、検索フォーム付きドロワーメニューの基本実装を学びたい方にもおすすめです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本記事で紹介している内容を利用したことによる損害・トラブルについて、当サイトは一切の責任を負いません。

デモ

検索フォーム付きドロワーメニュー

ボタンをクリックすると、画面左側へ検索フォームが表示されます。

「検索フォームを開く」をクリックすると、画面左側に検索フォームが表示されます。右上の「×」ボタンをクリックすると閉じられます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>検索フォーム付きドロワーメニュー</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- ドロワーメニューを開く操作エリア -->
  <div class="search-form-drawer-menu_wrap">

    <!-- 操作エリアのタイトル -->
    <div class="search-form-drawer-menu_title">
      検索フォーム付きドロワーメニュー
    </div>

    <!-- 操作エリアの説明文 -->
    <p class="search-form-drawer-menu_text">
      ボタンをクリックすると、画面左側へ検索フォームが表示されます。
    </p>

    <!-- ドロワーメニューを開くボタン -->
    <button
      class="search-form-drawer-menu_open"
      type="button"
      data-search-drawer-open>
      検索フォームを開く
    </button>

  </div>

  <!-- ドロワーメニュー表示時の背景 -->
  <div
    class="search-form-drawer-menu_overlay"
    data-search-drawer-overlay
    aria-hidden="true">

    <!-- ドロワーメニュー本体 -->
    <div
      class="search-form-drawer-menu_drawer"
      role="dialog"
      aria-modal="true"
      aria-labelledby="search-form-drawer-menu-heading">

      <!-- ドロワーメニュー上部 -->
      <div class="search-form-drawer-menu_header">

        <!-- ドロワーメニューのタイトル -->
        <div
          class="search-form-drawer-menu_heading"
          id="search-form-drawer-menu-heading">
          サイト内検索
        </div>

        <!-- ドロワーメニューを閉じるボタン -->
        <button
          class="search-form-drawer-menu_close"
          type="button"
          data-search-drawer-close
          aria-label="ドロワーメニューを閉じる">
          ×
        </button>

      </div>

      <!-- 検索フォームの説明文 -->
      <p class="search-form-drawer-menu_description">
        検索したいキーワードを入力してください。
      </p>

      <!-- 検索フォーム -->
      <form
        class="search-form-drawer-menu_form"
        data-search-drawer-form>

        <!-- 検索キーワード入力欄 -->
        <input
          class="search-form-drawer-menu_input"
          type="search"
          name="keyword"
          placeholder="キーワードを入力"
          aria-label="検索キーワード"
          required>

        <!-- 検索ボタン -->
        <button
          class="search-form-drawer-menu_submit"
          type="submit">
          検索
        </button>

      </form>

      <!-- 検索処理についての注意書き -->
      <p class="search-form-drawer-menu_note">
        このサンプルには実際の検索処理は実装されていません。
      </p>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されており、ボタンをクリックすると画面左側から検索フォーム付きドロワーメニューを表示できます。JavaScriptでドロワーメニューの開閉を制御し、HTMLで検索フォームを構成、CSSでレイアウトやデザインを設定しています。

検索フォームには検索キーワードの入力欄と検索ボタンを用意しています。サンプルでは画面デザインとドロワーメニューの動作確認を目的としており、実際の検索処理は含まれていません。検索ボタンを押してもページ遷移や検索結果の表示は行われません。

HTML・CSS・JavaScriptをそれぞれ分離しているため、検索フォームのレイアウト変更や入力項目の編集、ドロワーメニューのデザイン変更などを行いやすい構成です。サイト内検索や商品検索画面などのUI作成にも利用できます。 

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.html
ドロワーメニュー、検索フォーム、入力欄、検索ボタンを配置しています。タイトルや説明文、入力欄、ボタンの文字などを変更できます。

style.css
ドロワーメニュー全体のレイアウトやデザインを設定しています。背景色、文字色、入力欄、ボタン、余白、角丸、影、ドロワーメニューの横幅などを変更できます。

script.js
ドロワーメニューの表示・非表示を制御しています。また、サンプルとしてフォーム送信時に画面遷移しないよう送信を停止する処理を実装しています。

設置方法・使い方
sampleフォルダを任意の場所へ配置し、sample/index.htmlをブラウザで開いてください。「検索フォームを開く」ボタンをクリックするとドロワーメニューが表示されます。検索キーワードを入力して検索ボタンを押しても、サンプルのため実際の検索処理は実行されません。

カスタマイズできる内容
index.htmlではタイトル、説明文、入力欄、プレースホルダー、ボタンの文字を変更できます。style.cssでは背景色、文字色、入力欄、ボタン、余白、角丸、影、ドロワーメニューの横幅などを自由に調整できます。script.jsではドロワーメニューの開閉動作やフォーム送信時の処理を変更できます。

数値調整
style.cssのwidth:420pxはドロワーメニューの横幅です。paddingを変更すると余白、border-radiusを変更すると角丸の大きさが変わります。transition:0.2s;はボタンのアニメーション時間を表しており、値を大きくするとゆっくり、小さくすると速く変化します。animation:0.35s;を変更するとドロワーメニューが表示される速度を調整できます。

レスポンシブ対応
style.cssではwidth:100%、max-width、@mediaを利用してレスポンシブ対応しています。画面サイズに応じてドロワーメニューや余白、検索フォームのレイアウトを自動調整するため、スマートフォン・タブレット・PCで利用できます。

こちらもおすすめ

ドロワーメニュー
ドロワーメニューのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント