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

ドロワーメニュー

ログインフォーム付きドロワーメニューの作り方

ログインフォーム付きドロワーメニューの作り方を紹介します。ボタンをクリックすると画面の左側からドロワーメニューが表示され、その中にログインフォームを配置できるサンプルです。限られた画面スペースでもログイン機能を見やすく表示したい場合に利用できます。

フォームにはユーザーIDやメールアドレス、パスワードなどの入力欄を配置でき、ヘッダーやナビゲーションと組み合わせたログイン画面にも活用できます。JavaScriptでドロワーメニューの開閉を制御するため、シンプルな構成で導入しやすいのも特徴です。

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="login-form-drawer-menu_wrap">

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

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

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

  </div>

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

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

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

        <!-- ドロワーメニューのタイトル -->
        <div
          class="login-form-drawer-menu_heading"
          id="login-form-drawer-menu-heading">
          ログイン
        </div>

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

      </div>

      <!-- ログインフォームの説明文 -->
      <p class="login-form-drawer-menu_description">
        メールアドレスとパスワードを入力してください。
      </p>

      <!-- ログインフォーム -->
      <form
        class="login-form-drawer-menu_form"
        data-login-drawer-form>

        <!-- メールアドレス入力欄 -->
        <div class="login-form-drawer-menu_field">

          <label
            class="login-form-drawer-menu_label"
            for="login-form-drawer-menu-email">
            メールアドレス
          </label>

          <input
            class="login-form-drawer-menu_input"
            id="login-form-drawer-menu-email"
            type="email"
            name="email"
            placeholder="example@example.com"
            autocomplete="email"
            required>

        </div>

        <!-- パスワード入力欄 -->
        <div class="login-form-drawer-menu_field">

          <label
            class="login-form-drawer-menu_label"
            for="login-form-drawer-menu-password">
            パスワード
          </label>

          <input
            class="login-form-drawer-menu_input"
            id="login-form-drawer-menu-password"
            type="password"
            name="password"
            placeholder="パスワードを入力"
            autocomplete="current-password"
            required>

        </div>

        <!-- ログインボタン -->
        <button
          class="login-form-drawer-menu_submit"
          type="submit">
          ログインする
        </button>

      </form>

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

    </div>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLにはログインフォーム付きドロワーメニューの構造、CSSにはフォームとドロワーメニューのデザイン、JavaScriptにはドロワーメニューの開閉処理を記述しています。現在のコードにはログイン認証処理は含まれておらず、画面表示とドロワーメニューの動作確認を目的としたサンプルです。

PHPと組み合わせて実際のログイン機能として利用する場合は、index.htmlのform要素に送信先PHPを指定し、method属性をpostへ変更します。メールアドレスとパスワードにはname属性が設定されているため、PHP側ではPOSTデータとして受け取れます。ログイン認証やセッション管理などは送信先PHPで実装してください。

このサンプルはログインフォームの見た目とドロワーメニューの開閉を確認するためのコードです。PHPと組み合わせる場合も、HTML・CSS・JavaScriptの構成はそのまま利用でき、フォームのaction属性とmethod属性を変更することでログイン処理へ接続できます。 

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

各ファイルの役割
index.html はログインフォーム、ドロワーメニュー本体、開くボタン、閉じるボタンを配置します。PHPと組み合わせる場合は、form要素のaction属性へ送信先PHPを指定し、method属性をpostへ変更します。メールアドレスはname=”email”、パスワードはname=”password”としてPHP側で受け取れます。

style.css はドロワーメニューの横幅、背景色、余白、角丸、影、入力欄、ログインボタンなどのデザインを管理します。PHPと組み合わせた場合でも、このファイルはそのまま利用できます。

script.js はドロワーメニューを開く処理、閉じるボタンで閉じる処理、フォーム送信時のデモ用処理を管理します。デモでは送信ボタン押下時の表示のみを行い、実際のログイン認証は行いません。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、sample/index.htmlをブラウザで開くと動作を確認できます。「ログインフォームを開く」ボタンをクリックするとドロワーメニューが開きます。

PHPと組み合わせる場合は、index.htmlのform要素を次のように変更します。

action=”#”
method=”get”

を、

action=”login.php”
method=”post”

へ変更します。送信先のlogin.phpでは、email・passwordを受け取り、入力チェック、ログイン認証、セッション管理などの処理を実装してください。

カスタマイズできる内容
index.htmlではタイトル、説明文、ボタン名、メールアドレス欄、パスワード欄、送信先PHPを変更できます。style.cssではドロワーメニューの横幅、背景色、入力欄の余白、角丸、影、ボタン色などを変更できます。script.jsではドロワーメニューの開閉処理を編集できます。

数値調整
style.cssのwidth:420px;を変更するとドロワーメニューの横幅が変わります。padding:28px;を変更するとドロワー内部の余白が変わります。gap:20px;を変更すると入力欄同士の間隔が変わります。animation:.35s;の0.35秒を変更するとドロワーメニュー表示アニメーションの速度が変わります。transition:.2s;の0.2秒を変更するとボタンのアニメーション速度が変わります。

レスポンシブ対応
style.cssではwidth:100%、max-width、padding、@media (max-width:640px)を使用してレスポンシブ対応しています。スマートフォンではドロワーメニューや余白が縮小され、タブレットやPCでは適切な横幅を保ったまま表示されます。

こちらもおすすめ

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

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

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

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

トップページで探す！

コメント