開くと階層メニューが現れるドロワー
サイドからスライドして現れるドロワーメニューの中に、カテゴリ別の階層メニューを内蔵した構造です。
カテゴリをクリックするとサブ項目がスムーズに開閉し、限られたスペースでも整理された多層ナビゲーションを実現します。
「サイドメニュー+アコーディオン展開」の組み合わせで、UI/UXどちらにも優れた操作体験を提供します。
コードについて
本記事のコードは AI(ChatGPT)による生成をベースに作成・調整しています。ご利用の環境でテストの上ご使用ください。
免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。
免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。
デモ
右上のボタンからドロワーを開き、カテゴリをクリックするとサブ項目が展開します。
コードをコピーして使おう!
/* --- セクション体裁(レイアウト全体) --- */
#demo-section.demo-wrap{
max-width:960px; /* セクション全体の最大横幅を960pxに制限 */
margin:0 auto; /* 横方向を中央寄せ配置 */
padding:0 16px; /* 左右に16pxの余白を付与 */
font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif; /* 読みやすいシステムフォント群 */
color:#0f172a; /* テキスト色を濃いネイビー系に設定 */
}
/* --- カラートークン(色や基本値の定義) --- */
#drawer-accordion-demo{
--accent:#0b6bff; /* 強調色(ボタンやリンクなどに使用) */
--ink:#0f172a; /* 通常文字色 */
--border:#e5e7eb; /* 枠線・仕切り線の色 */
color:var(--ink); /* このスコープ内の文字色を統一 */
}
/* --- 「メニューを開く」ボタン --- */
#drawer-accordion-demo .btn{
background:var(--accent); /* ボタン背景に強調色(青)を使用 */
color:#fff; /* テキストは白で高コントラストに */
border:none; /* 枠線を消してスッキリ */
border-radius:12px; /* 丸みを帯びた角で親しみやすく */
padding:10px 16px; /* クリックしやすい余白を確保 */
cursor:pointer; /* ホバー時にポインタカーソルを表示 */
transition:opacity .24s ease, transform .24s ease; /* ホバー時のアニメーション設定 */
}
/* --- ボタンホバー時のエフェクト --- */
#drawer-accordion-demo .btn:hover{
opacity:.9; /* 若干透過させて反応感を出す */
transform:translateY(-1px); /* 少し上に浮くような動き */
}
/* --- ボタン押下時のエフェクト --- */
#drawer-accordion-demo .btn:active{
transform:translateY(0); /* 元の位置に戻す(押し込み表現) */
}
/* --- オーバーレイ(背景の半透明レイヤー) --- */
#drawer-accordion-demo .layer{
position:fixed; /* 画面全体に固定配置 */
inset:0; /* 上下左右すべて0で全画面をカバー */
background:rgba(2,8,23,.5); /* 半透明の黒に青みを加えた背景色 */
opacity:0; /* 初期状態では透明にして非表示 */
pointer-events:none; /* 非表示中はクリック操作を無効化 */
transition:opacity .26s ease; /* フェードイン・アウトの動作を滑らかに */
z-index:1000; /* コンテンツより前面に配置 */
}
/* --- ドロワーパネル本体(右スライドで表示) --- */
#drawer-accordion-demo .panel{
position:fixed; /* 画面に固定表示 */
top:0; /* 上端を画面の上に固定 */
right:0; /* 右端から出現する配置 */
width:min(86vw,320px); /* 画面幅の86%または最大320px */
height:100dvh; /* 画面高(モバイルブラウザ対応) */
background:#fff; /* 背景は白 */
border-left:1px solid var(--border); /* 左側に境界線を追加 */
box-shadow:-8px 0 28px rgba(2,8,23,.18); /* 左方向に影を落として立体感 */
transform:translateX(100%); /* 初期状態では画面外に隠す */
transition:transform .26s ease-out;/* スライドインの動作を滑らかに */
display:flex; /* 縦方向に要素を並べる */
flex-direction:column; /* header → nav の順に縦積み配置 */
z-index:1001; /* オーバーレイより前面に表示 */
}
/* --- ヘッダー部分(タイトル+閉じるボタン) --- */
#drawer-accordion-demo .panel header{
display:flex; /* 横並び配置 */
align-items:center; /* 垂直方向の中央揃え */
justify-content:space-between; /* 左右端に要素を配置 */
padding:14px; /* 内側余白を設定 */
border-bottom:1px solid var(--border); /* 下側に仕切り線 */
}
/* --- 独自タイトル要素(.drawer-title) --- */
#drawer-accordion-demo .drawer-title{
all:unset; /* 既存のh3などのブラウザ既定スタイルを除去 */
display:block; /* ブロック要素として扱う */
font-size:16px; /* タイトル文字サイズを設定 */
font-weight:600; /* 半太字で視認性アップ */
color:var(--ink); /* 通常文字色を適用 */
}
/* --- 閉じるボタン --- */
#drawer-accordion-demo .close{
background:transparent; /* 背景は透明で軽さを出す */
border:1px solid var(--border); /* 薄い枠線で視認性を確保 */
border-radius:10px; /* 角を丸めて柔らかく */
padding:6px 10px; /* 十分なクリック領域を確保 */
font-size:12px; /* 小さめの文字で控えめな印象に */
cursor:pointer; /* カーソルをポインタに変更 */
}
/* --- メニュー全体(アコーディオン構造) --- */
#drawer-accordion-demo .menu ul{
list-style:none; /* デフォルトのリストマーカーを削除 */
margin:0; /* 外側余白をリセット */
padding:0; /* 内側余白をリセット */
}
/* --- アコーディオンの見出しボタン(カテゴリ) --- */
#drawer-accordion-demo .accordion{
width:100%; /* 横幅いっぱいに広げる */
background:none; /* 背景は透明 */
border:none; /* 枠線を削除してシンプルに */
padding:12px 16px; /* 内側に余白を付ける */
font-size:14px; /* 読みやすいサイズに調整 */
text-align:left; /* テキストを左寄せに */
color:var(--ink); /* 通常の文字色を適用 */
cursor:pointer; /* カーソルをポインタに変更 */
display:flex; /* 矢印とテキストを横並びに配置 */
justify-content:space-between; /* テキストと矢印を両端配置 */
align-items:center; /* 垂直方向を中央に揃える */
}
/* --- アコーディオン右側の矢印アイコン --- */
#drawer-accordion-demo .accordion::after{
content:'▸'; /* 右向き三角アイコンを表示 */
font-size:12px; /* アイコンサイズを調整 */
transition:transform .2s; /* 開閉時の回転アニメーション */
}
/* --- 開いた状態の矢印回転 --- */
#drawer-accordion-demo .accordion[aria-expanded="true"]::after{
transform:rotate(90deg); /* 下向き(90度回転)に変更 */
}
/* --- サブメニュー領域(初期は非表示) --- */
#drawer-accordion-demo .submenu{
max-height:0; /* 高さを0にして閉じた状態 */
overflow:hidden; /* はみ出した内容を非表示に */
transition:max-height .3s ease; /* 高さ変化をスムーズにアニメーション */
background:#f8fafc; /* 薄いグレー背景で層の違いを出す */
}
/* --- サブメニューのリンク項目 --- */
#drawer-accordion-demo .submenu a{
display:block; /* リンクをブロック要素化して全体をクリック可に */
padding:10px 22px; /* 左右に余白を取り階層を明示 */
font-size:13px; /* やや小さめの文字で階層差を演出 */
color:var(--ink); /* 通常文字色を適用 */
text-decoration:none; /* 下線を削除して整える */
}
/* --- サブメニュー項目ホバー時 --- */
#drawer-accordion-demo .submenu a:hover{
background:#e5f0ff; /* 薄い青背景でホバーを視覚的に表現 */
}
/* --- 開状態の制御 --- */
#drawer-accordion-demo.open .layer{
opacity:1; /* 背景レイヤーを可視化(フェードイン) */
pointer-events:auto; /* 背景クリックを有効化(閉じ動作可能に) */
}
#drawer-accordion-demo.open .panel{
transform:translateX(0); /* パネルを画面内へスライドイン表示 */
}
コメント