フェード+スライド演出で自然な開閉
クリックで右側からメニューがゆっくりスライドしながらフェード表示されるドロワー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; /* 本体ページのスクロールを停止 */
}
コメント