コピペで完結！ドロワーメニュー#09【上部ナビバーからドロップダウン風に出現】

html/css/js

上部ナビバーからドロップダウン風に出現

ページ上部のナビゲーションバーから、下方向にスライドして現れるドロップダウン風のドロワーメニューです。
通常のサイドドロワーとは異なり、ヘッダー下に展開する構造で、メインコンテンツを隠さずにメニューを表示できます。
ナビバー＋ドロワーの組み合わせで、シンプルかつ軽量なヘッダーメニューを実装できます。

コードについて 本記事のコードは AI（ChatGPT）による生成をベースに作成・調整しています。ご利用の環境でテストの上ご使用ください。
免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。

デモ

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

/* ================================================================
   セクション全体設定
   デモを中央寄せで整える
================================================================ */
#demo-section.demo-wrap{
  max-width:960px;            /* コンテンツ幅を最大960pxに制限 */
  margin:0 auto;              /* 中央寄せ */
  padding:0 16px;             /* 左右余白を確保 */
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif; /* システムフォント */
  color:#0f172a;              /* 標準文字色（濃いグレー） */
}

/* ================================================================
   デモ本体コンテナ
   ナビとドロップ領域をまとめるボックス
================================================================ */
#drawer-top-demo{
  border-radius:8px;          /* 柔らかい角丸 */
  overflow:hidden;            /* 内部の要素がはみ出さないようにする */
  box-shadow:0 4px 14px rgba(2,8,23,.1); /* 軽いドロップシャドウを付与 */
}

/* ================================================================
   ナビゲーションバー（上部）
   背景色・文字配置を指定
================================================================ */
#drawer-top-demo .navbar{
  display:flex;               /* 横並び配置 */
  align-items:center;         /* 垂直方向の中央揃え */
  justify-content:space-between; /* 左右両端に要素を配置 */
  padding:12px 16px;          /* 上下左右の内側余白 */
  background:#0b6bff;         /* 鮮やかな青（アクセントカラー） */
  color:#fff;                 /* 白文字でコントラスト確保 */
}

/* ================================================================
   独自タイトル（WordPressテーマのh3装飾をリセット）
   「ナビゲーション」などの固定テキスト表示に使用
================================================================ */
#drawer-top-demo .nav-title{
  all:unset;                  /* 全てのブラウザ既定＆WPテーマ装飾をリセット */
  display:inline-block;       /* インライン要素として扱う */
  font-weight:700;            /* 太字でタイトルらしく */
  font-size:16px;             /* 適度な大きさ */
  letter-spacing:0.02em;      /* わずかに文字間隔を広げる */
  color:#fff;                 /* 白文字で背景と調和 */
  cursor:default;             /* カーソルは通常の矢印（クリック不可） */
}

/* ================================================================
   メニューボタン
   ナビ右側に配置される「メニューを開く」ボタン
================================================================ */
#drawer-top-demo .menu-btn{
  background:#fff;                                /* 白背景 */
  color:#0b6bff;                                  /* 文字は青 */
  border:1px solid rgba(255,255,255,0.6);         /* やや透過した白枠 */
  border-radius:8px;                              /* 角丸 */
  padding:6px 10px;                               /* クリック領域確保 */
  font-size:13px;                                 /* コンパクトな文字 */
  cursor:pointer;                                 /* ホバー時にポインタ表示 */
  transition:opacity .25s ease, transform .25s ease; /* フェード＆軽い動き */
}
/* ホバー時の軽い浮き上がり効果 */
#drawer-top-demo .menu-btn:hover{
  opacity:.9;                                     /* 少し透明に */
  transform:translateY(-1px);                     /* 1px上に移動 */
}

/* ================================================================
   ドロップダウンパネル
   下方向にスライド展開するメニュー領域
================================================================ */
#drawer-top-demo .panel{
  background:#fff;                                /* 白背景 */
  border:1px solid #e5e7eb;                       /* 薄いグレー枠線 */
  border-top:none;                                /* ナビとの境界は非表示 */
  max-height:0;                                   /* 初期は高さ0で非表示 */
  overflow:hidden;                                /* 内容を隠す */
  transition:max-height .3s ease;                 /* 開閉アニメーション */
}
/* パネルが開かれた状態（.open クラス付与時） */
#drawer-top-demo .panel.open{
  max-height:240px;                               /* 下に展開（高さ指定） */
}

/* ================================================================
   パネル内部リスト
   メニュー項目のレイアウト調整
================================================================ */
#drawer-top-demo .panel ul{
  list-style:none;                                /* デフォルトの点を消す */
  margin:0;                                       /* 外側余白リセット */
  padding:12px;                                   /* 内側余白を確保 */
}
/* 各項目間に軽い余白 */
#drawer-top-demo .panel li{
  margin:4px 0;
}
/* 各リンクスタイル */
#drawer-top-demo .panel a{
  display:block;                                  /* ブロック化で広いクリック範囲 */
  padding:8px 10px;                               /* 内側余白 */
  color:#0f172a;                                  /* 標準文字色 */
  text-decoration:none;                           /* 下線を削除 */
  border-radius:6px;                              /* 角丸で柔らかく */
  transition:background .2s;                      /* 背景変化アニメーション */
}
/* ホバー時の背景ハイライト */
#drawer-top-demo .panel a:hover{
  background:#f1f5ff;                             /* 淡い青で強調 */
}

/* ================================================================
   prefers-reduced-motion（動きを減らしたいユーザー対応）
   アニメーションをオフにする
================================================================ */
@media (prefers-reduced-motion: reduce){
  #drawer-top-demo .panel{
    transition:none !important;                   /* アニメーションを無効化 */
  }
}

コメント