コピペで完結!ドロワーメニュー#08【開くと階層メニューが現れる】

html/css/js

開くと階層メニューが現れるドロワー

サイドからスライドして現れるドロワーメニューの中に、カテゴリ別の階層メニューを内蔵した構造です。
カテゴリをクリックするとサブ項目がスムーズに開閉し、限られたスペースでも整理された多層ナビゲーションを実現します。
「サイドメニュー+アコーディオン展開」の組み合わせで、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);           /* パネルを画面内へスライドイン表示 */
}

コメント