コピペで完結!ドロワーメニュー#06【フェード+スライド演出で自然な開閉】

html/css/js

フェード+スライド演出で自然な開閉

クリックで右側からメニューがゆっくりスライドしながらフェード表示されるドロワーUIです。
アイコンとテキストを組み合わせたナビゲーションを簡単に実装でき、閉じるボタンは常に見える位置に固定。
CSSのみで自然な動きを演出し、JavaScriptでは開閉制御だけを担う軽量構成です。

コードについて 本記事のコードは AI(ChatGPT)による生成と検証をもとに作成しています。
実際のサイトへ導入する際は、必ずご利用環境での動作確認を行ってください。
免責 本コードの利用により発生した不具合・損害について、当サイトは一切の責任を負いません。
必ずご自身の判断と責任においてご利用ください。

デモ

下のボタンをクリックすると、右側からゆっくりフェード+スライド演出でドロワーメニューが表示されます。

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



/* === 開くボタン(メニューを開く) === */
#drawer-section .menu-btn{
  background:#0b6bff;           /* ボタン背景を鮮やかな青に設定して視認性を確保 */
  color:#fff;                   /* 白文字でコントラストを高める */
  border:none;                  /* デフォルトのボーダーを削除してシンプル化 */
  border-radius:8px;            /* 丸みを帯びた形状で親しみやすさを演出 */
  padding:10px 16px;            /* クリック領域を十分に確保して操作性を向上 */
  cursor:pointer;               /* マウスオーバー時にポインタ形状を表示 */
  transition:opacity .3s ease,  /* 透明度の変化を滑らかに */
             transform .3s ease;/* 押下時の動きを自然に */
}
/* --- ホバー時の演出(軽い反応をつける) --- */
#drawer-section .menu-btn:hover{
  opacity:.9;                   /* ほんの少し透明にして動きを感じさせる */
  transform:translateY(-2px);   /* ボタンが軽く浮き上がるように見せる */
}

/* === オーバーレイ(背景の暗転レイヤー) === */
#drawer-section .overlay{
  position:fixed;               /* 画面全体に固定配置 */
  inset:0;                      /* 上下左右すべて0で全面をカバー */
  background:rgba(0,0,0,.5);    /* 半透明の黒背景で背面を暗くする */
  opacity:0;                    /* 初期状態では透明(非表示) */
  visibility:hidden;            /* レイアウト上からも隠す */
  pointer-events:none;          /* 非表示時はクリックなどの操作を無効化 */
  justify-content:flex-end;     /* ドロワーを右側に寄せて配置する */
  transition:
    opacity 1.4s ease-in-out,   /* フェード効果をゆっくり実行 */
    visibility 0s linear 1.4s;  /* フェード終了後に不可視状態に切り替え */
  z-index:9999;                 /* 他要素より最前面に表示 */
}
/* --- オーバーレイが有効になった時(表示状態) --- */
#drawer-section .overlay.active{
  opacity:1;                    /* 不透明化して可視状態に */
  visibility:visible;           /* 表示を有効化 */
  pointer-events:auto;          /* 背景クリックを有効に */
  transition:opacity 1.4s ease-in-out; /* フェードインも滑らかに */
}

/* === ドロワー本体(右側からスライドイン) === */
#drawer-section .drawer{
  background:#fff;                           /* 白背景で内容を明るく見せる */
  width:min(80vw,320px);                    /* 画面幅の80%または320pxの小さい方を採用 */
  height:100dvh;                            /* 画面の高さいっぱい(UIバー対応) */
  display:flex;                             /* 内部をフレックスで配置 */
  flex-direction:column;                    /* 上から下へ順に積むレイアウト */
  justify-content:flex-start;               /* コンテンツを上詰めに配置 */
  box-shadow:-8px 0 30px rgba(0,0,0,.25);   /* 左側に落ち影をつけて立体感を出す */
  transform:translateX(140%);               /* 初期状態では右側の画面外に配置 */
  opacity:0;                                /* 非表示(フェード前) */
  transition:
    transform 1.2s cubic-bezier(.19,1,.22,1), /* 滑らかで弾力のあるスライド感 */
    opacity 1.2s ease-in-out;               /* フェード効果も同時に実行 */
  padding:20px;                             /* 内側の余白を設定 */
}

/* --- オーバーレイが.activeのときにドロワーを可視化 --- */
#drawer-section .overlay.active .drawer{
  transform:translateX(0);      /* 右外から画面内にスライドイン */
  opacity:1;                    /* 完全に不透明にして表示 */
  transition-delay:.15s;        /* フェードより少し遅らせて自然に見せる */
}

/* === タイトル(h3を使わず.drawer-titleで独立定義) === */
#drawer-section .drawer-title{
  all:unset;                    /* ブラウザ&WP既定のスタイルを全解除 */
  display:block;                /* ブロック要素として扱う */
  font-size:18px;               /* タイトル文字サイズを指定 */
  font-weight:700;              /* 太字で見出しとしての強調を出す */
  margin:0 0 12px;              /* 下方向に余白を確保 */
  color:#0f172a;                /* 濃いグレー文字で読みやすく */
}

/* === ナビゲーションリスト(縦並び構造) === */
#drawer-section .nav-list{
  list-style:none;              /* デフォルトの黒点を削除 */
  padding:0;                    /* 余白をリセット */
  margin:0;                     /* 余白をリセット */
  display:flex;                 /* 子要素をフレックス配置 */
  flex-direction:column;        /* 縦方向に並べる */
  gap:8px;                      /* 各項目の間隔を8pxに */
}

/* === 各リンク項目 === */
#drawer-section .nav-list li a{
  display:flex;                 /* アイコンと文字を横並びに */
  align-items:center;           /* 縦位置を中央に揃える */
  gap:10px;                     /* アイコンと文字の間隔を10pxに */
  padding:10px 12px;            /* クリック領域を確保 */
  border-radius:8px;            /* 丸みをつけてフラットデザイン化 */
  color:#0f172a;                /* 標準文字色 */
  text-decoration:none;         /* 下線を削除してボタン風に */
  transition:background .3s ease;/* 背景変化を滑らかに */
}
/* --- ホバー時(背景を淡く変更) --- */
#drawer-section .nav-list li a:hover{
  background:#f1f5f9;           /* 淡いグレーで反応を視覚化 */
}

/* === アイコン(絵文字など) === */
#drawer-section .icon{
  width:20px;                   /* 横幅を固定 */
  height:20px;                  /* 高さを固定 */
  display:inline-block;         /* インラインブロックで整列 */
  text-align:center;            /* 中央寄せ */
}

/* === 閉じるボタン === */
#drawer-section .close-btn{
  margin-top:auto;              /* 下部へ自動配置(ドロワー内で最下部) */
  background:#e2e8f0;           /* 明るいグレーで控えめに表示 */
  color:#0f172a;                /* 標準文字色で統一 */
  border:none;                  /* 不要な枠線を削除 */
  border-radius:6px;            /* 角丸で柔らかい印象に */
  padding:8px 12px;             /* 操作しやすい余白 */
  cursor:pointer;               /* マウスオーバーでクリック感を出す */
  transition:background .3s ease;/* 背景変化を滑らかに */
}
/* --- ホバー時(色変化で操作感を出す) --- */
#drawer-section .close-btn:hover{
  background:#cbd5e1;           /* やや濃いグレーで反応を見せる */
}

/* === 背景スクロール抑止(ドロワー開時) === */
body.drawer-lock{
  overflow:hidden;              /* 本体ページのスクロールを停止 */
}

コメント