コピペで完結！ドロワーメニュー#11【4方向から出せるドロワーメニュー】

html/css/js

4方向から出せるドロワーメニュー

本記事では、ボタン操作だけで左・右・上・下の4方向からスライド表示できるドロワーメニューの実装方法をご紹介します。
CSSとJavaScriptを組み合わせ、スライド方向を動的に切り替えられる汎用コンポーネントとして構築。コピペで導入でき、既存サイトへの組み込みも容易です。

コードについて 本記事のコードはAI（ChatGPT）によって生成・調整されています。必ずご自身の環境で動作を確認してからご利用ください。
免責 本コードの利用により生じた不具合・損害について、当サイトは責任を負いません。自己責任でご使用ください。

デモ

下のボタンでドロワーを開閉し、「方向変更」ボタンでスライド方向（左→右→上→下）を切り替えてみてください。

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

/* ============================================
   ▼ CSS：#drawer-direction-section スコープ推奨
   ボタン操作でスライド方向を切り替え可能な
   4方向対応ドロワーメニューのスタイル定義
   ============================================ */

/* --- コンテナ（全体を包む要素） --- */
#drawer-direction-section{
  position:relative; /* パネルやボタンなどの基準位置を固定するための相対配置 */
}

/* --- 「メニューを開く」ボタン --- */
#drawer-direction-section .menu-btn{
  background:#0b6bff; /* メインのアクセントカラー（鮮やかな青） */
  color:#fff;         /* 白文字でコントラストを確保 */
  border:none;        /* 既定の枠線を削除してシンプルに */
  border-radius:8px;  /* 角丸でやわらかい印象に */
  padding:10px 16px;  /* クリックしやすい大きめのパディング */
  cursor:pointer;     /* ホバー時にポインタを表示 */
}

/* --- 「方向変更」ボタン --- */
#drawer-direction-section .change-btn{
  border:1px solid #e5e7eb; /* グレーの枠線で区切りをつける */
  background:#fff;          /* 白背景でメインボタンとの差別化 */
  border-radius:8px;        /* 角丸で統一感を保つ */
  padding:10px 14px;        /* 適度なパディングで押しやすく */
  cursor:pointer;           /* ホバー時にポインタ表示 */
}

/* --- オーバーレイ（背景の半透明レイヤー） --- */
#drawer-direction-section .overlay{
  position:fixed;           /* 画面全体を覆う */
  inset:0;                  /* 四方を0にして全領域カバー */
  background:rgba(0,0,0,0.5); /* 半透明の黒で背景を暗くする */
  opacity:0;                /* 初期は非表示 */
  pointer-events:none;      /* クリックを無効化 */
  transition:opacity .25s ease; /* フェードイン・アウトを滑らかに */
}

/* --- オーバーレイが表示状態のとき --- */
#drawer-direction-section .overlay.active{
  opacity:1;                /* 不透明にして可視化 */
  pointer-events:auto;      /* 背景クリックを有効化（閉じる処理に使う） */
}

/* --- ドロワーパネル本体 --- */
#drawer-direction-section .panel{
  position:fixed;           /* 画面に固定配置（スクロールしても位置固定） */
  background:#fff;          /* 背景は白で内容を明瞭に */
  box-shadow:0 0 18px rgba(0,0,0,0.25); /* 軽い影で浮き上がりを演出 */
  transition:transform .3s ease; /* スライドの動きを滑らかに */
  display:flex;             /* ヘッダーとナビを縦並びにする */
  flex-direction:column;    /* 縦方向レイアウト */
  width:min(86vw,340px);    /* 横幅を画面幅の86% or 最大340pxに制限 */
  height:100dvh;            /* 高さをデバイス表示領域の全体に */
}

/* --- 各方向の初期位置（非表示時のオフスクリーン位置） --- */
#drawer-direction-section .panel.from-left{
  top:0; left:0; transform:translateX(-100%); /* 左からスライドインする初期位置 */
}
#drawer-direction-section .panel.from-right{
  top:0; right:0; transform:translateX(100%); /* 右からスライドインする初期位置 */
}
#drawer-direction-section .panel.from-top{
  top:0; left:0;
  width:100vw; height:min(80vh,500px);        /* 横幅100%、高さは最大500pxに制限 */
  transform:translateY(-100%);                /* 上からスライドインする初期位置 */
}
#drawer-direction-section .panel.from-bottom{
  bottom:0; left:0;
  width:100vw; height:min(80vh,500px);        /* 横幅100%、高さは最大500pxに制限 */
  transform:translateY(100%);                 /* 下からスライドインする初期位置 */
}

/* --- パネルがアクティブ（表示中）になった時の位置補正 --- */
#drawer-direction-section .panel.active.from-left{
  transform:translateX(0);  /* 左からスライドイン完了状態 */
}
#drawer-direction-section .panel.active.from-right{
  transform:translateX(0);  /* 右からスライドイン完了状態 */
}
#drawer-direction-section .panel.active.from-top{
  transform:translateY(0);  /* 上からスライドイン完了状態 */
}
#drawer-direction-section .panel.active.from-bottom{
  transform:translateY(0);  /* 下からスライドイン完了状態 */
}

/* --- ヘッダーエリア（タイトル＋閉じるボタン） --- */
#drawer-direction-section .panel header{
  display:flex;                      /* 横並び配置 */
  justify-content:space-between;     /* タイトルとボタンを左右に配置 */
  align-items:center;                /* 垂直中央寄せ */
  padding:14px 16px;                 /* 適度な内側余白 */
  border-bottom:1px solid #e5e7eb;   /* 下線で区切りをつける */
}

/* --- 閉じるボタン（×） --- */
#drawer-direction-section .close-btn{
  background:none;     /* 背景なしでシンプルに */
  border:none;         /* 枠線削除 */
  font-size:18px;      /* 大きめのサイズで視認性UP */
  cursor:pointer;      /* ポインタ表示でクリックを示す */
}

コメント