検索フォームがスライド表示される固定フッターメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】 

フッターメニュー

検索フォームがスライド表示される固定フッターメニューを作る方法

検索フォームがスライド表示される固定フッターメニューを作る方法を紹介します。本記事では、HTML、CSS、JavaScriptを使って、画面下部に固定したフッターメニューの検索ボタンをクリックすると、検索フォームが上方向へスライド表示されるレイアウトを実装します。必要なときだけ検索フォームを表示できるため、限られた画面スペースを有効活用しながら、快適に検索機能を利用できます。

このサンプルコードでは、検索ボタンをクリックするとJavaScriptで検索フォームの表示・非表示を切り替え、CSSで滑らかにスライド表示するアニメーションを実装しています。検索フォームを常に表示する必要がないため、画面をすっきり見せながら必要なタイミングだけ検索機能を利用できます。また、再度検索ボタンをクリックすると検索フォームを閉じられるシンプルな操作性になっています。

このような固定フッターメニューは、ブログ、ECサイト、ニュースサイト、会員サイト、Webアプリなど、スマートフォンでの操作性を重視するサイトで幅広く利用されています。固定フッターメニューへ検索機能を追加したい場合や、画面の見やすさを保ちながら検索フォームを設置したい場合にも活用しやすいサンプルです。

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

デモ

検索フォーム

検索ボタンを押すと、フッターの上に検索フォームがスライド表示されます。

検索ボタン

フッターメニューの検索ボタンをクリックすると、検索フォームが表示されます。

スライド表示

検索フォームはフッター上部へスライドしながら表示されます。

すっきりした画面

必要なときだけ検索フォームを表示できるため、画面を広く使えます。

検索ボタンを押すと、検索フォームに is-open クラスを追加して表示します。

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

<!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="footer-menu-slide-search_wrap">

    <!-- タイトル -->
    <h1 class="footer-menu-slide-search_title">
      検索フォームがスライド表示される固定フッターメニュー
    </h1>

    <!-- コンテンツ -->
    <main class="footer-menu-slide-search_content">
      <p>検索ボタンを押すと、フッターの上に検索フォームがスライド表示されます。</p>
    </main>

  </div>

  <!-- 検索フォーム -->
  <div class="footer-menu-slide-search_panel">
    <form class="footer-menu-slide-search_form">
      <input type="search" placeholder="キーワードを入力">
      <button type="submit">検索</button>
    </form>
  </div>

  <!-- フッターメニュー -->
  <nav class="footer-menu-slide-search_nav">

    <a href="#" class="footer-menu-slide-search_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M3 10L12 3L21 10M6 10V20H18V10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>ホーム</span>
    </a>

    <button type="button" class="footer-menu-slide-search_button">
      <svg viewBox="0 0 24 24" fill="none">
        <circle cx="11" cy="11" r="6" stroke="currentColor" stroke-width="2"/>
        <path d="M16 16L21 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>検索</span>
    </button>

    <a href="#" class="footer-menu-slide-search_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M12 20L5 13C3.5 11.5 3.5 9 5 7.5C6.5 6 9 6 10.5 7.5L12 9L13.5 7.5C15 6 17.5 6 19 7.5C20.5 9 20.5 11.5 19 13L12 20Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
      </svg>
      <span>お気に入り</span>
    </a>

    <a href="#" class="footer-menu-slide-search_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M7 17H17L16 15V10C16 7.8 14.2 6 12 6C9.8 6 8 7.8 8 10V15L7 17Z" stroke="currentColor" stroke-width="2"/>
        <path d="M10.5 19C10.8 19.6 11.3 20 12 20C12.7 20 13.2 19.6 13.5 19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>通知</span>
    </a>

    <a href="#" class="footer-menu-slide-search_item">
      <svg viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="8" r="3" stroke="currentColor" stroke-width="2"/>
        <path d="M6 20C6 16.7 8.7 14 12 14C15.3 14 18 16.7 18 20" stroke="currentColor" stroke-width="2"/>
      </svg>
      <span>マイページ</span>
    </a>

  </nav>

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

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptを別ファイルで管理します。HTMLに検索フォームと固定フッターメニューを配置し、CSSで検索フォームを初期状態では非表示に設定します。JavaScriptでは、検索ボタンをクリックしたときに検索フォームの表示・非表示を切り替え、フッターの上へスライド表示されるように制御します。 

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

3つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。フッターメニューの検索ボタンをクリックすると、検索フォームがフッターの上へスライド表示されます。再度クリックすると検索フォームを閉じることができます。

コメント