コピペで使えるCSSナビゲーションメニュー集

ページの上部に並ぶメニュー（ナビゲーション）は、サイトの顔であり道案内でもある大事な部品です。この記事は、そのまま使えるナビゲーションメニューを動くデモつきで9個まとめました。横並びの基本形からハンバーガーメニューまで、コピペして色とリンク先を差し替えるだけです。

まずは共通の下ごしらえ

メニューの正体は「リンクのリスト」なので、HTMLは<nav>の中に<ul>と<a>を入れた形が基本です。リストには黒丸や余白が標準でついてくるため、最初にこの.navでリセットしておくと、どのデザインもきれいに乗ります。

<nav>
  <ul class="nav">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">じこしょうかい</a></li>
    <li><a href="#">さくひん</a></li>
  </ul>
</nav>

.nav {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  display: block;
  padding: 8px 16px;
  color: #333;
  font-weight: bold;
  text-decoration: none;
}

以降のデザインは、この下ごしらえにクラスを足していく形で使います。

横並びの基本形

基本の横並びナビ

まずはこれ。左にサイト名、右にメニュー——世界中のサイトで使われている王道の配置です。justify-content: space-betweenが「両端に振り分ける」の意味です。

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

うっすらしたbox-shadowが「ここまでがヘッダー」という境目の役目をしてくれます。

ピル型ホバーのナビ

マウスを乗せた項目だけ、カプセル形の背景がふわっと付くナビ。押せる場所がはっきり伝わります。

.pill {
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.pill:hover {
  background: #ff8a3d;
  color: #fff;
}

下線がすっと伸びるナビ

ホバーすると、項目の下に線が中央からすっと伸びます。上品で、どんなデザインのサイトにもなじむ定番の動きです。

.underline {
  position: relative;
}
.underline::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 3px;
  border-radius: 3px;
  background: #ff8a3d;
  transform: scaleX(0);
  transition: transform 0.25s;
}
.underline:hover::after {
  transform: scaleX(1);
}

仕組みは「あらかじめ線を置いておき、ふだんは横幅0（scaleX(0)）につぶしておく」。ホバーで元の幅に戻すと、中央から伸びて見えます。

現在地がわかるナビ

「いま自分はどのページにいるのか」を示すのもナビの大事な仕事。いま開いているページの項目にcurrentクラスを付けて、色を変えておきます。

.nav a.current {
  background: #ff8a3d;
  color: #fff;
}

ページごとに、そのページの項目へcurrentを付け替えるだけ。訪問者が迷子になりにくくなります。

セレクタを.currentではなく.nav a.currentと書いているのには理由があります。文字色をすでに.nav aで指定しているので、.currentだけだと書いた順に関係なく.nav aのほうが強くて白文字になりません。同じaを狙うときは、こちらも.nav aより具体的に書いて競り勝たせます。

スクロールしてもついてくる

固定ヘッダー（sticky）

ページを下へスクロールしても、ヘッダーだけ画面の上に貼りつきます。必要なのはposition: stickyとtop: 0の2行だけです。

.sticky {
  position: sticky;
  top: 0;
}

stickyは「ふだんは普通に置かれて、画面の端に来たら貼りつく」という性質。長いページでも、いつでもメニューに手が届きます。

スマホの定番・ハンバーガーメニュー

画面がせまいスマホでは、メニューを三本線のボタン（ハンバーガーボタン）にしまっておき、押したら開く形が定番です。

CSSだけで作るハンバーガーメニュー

JavaScriptを使わず、チェックボックスのオン・オフを開閉スイッチとして使う方法です。チェックボックス本体は隠して、ラベル（三本線）だけを見せています。

.menu-check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;   /* 見た目は消しつつ、キーボードのフォーカスは残す */
}
.drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}
.menu-check:checked ~ .drawer {
  max-height: 200px;   /* チェックが入ったらひらく */
}

かなめは最後の1ブロック。:checked（チェックが入っている間）と~（同じ親の中の後ろの要素）を組み合わせて、「チェックされたらメニューの高さを解放する」と書いています。

JavaScriptで作るハンバーガーメニュー（×に変わる）

ボタンを押すと三本線が×印に変形する、より本格的な形。開閉の切り替えはJavaScript数行で書けます。

const btn = document.getElementById("btn");
btn.addEventListener("click", function () {
  document.querySelector(".header").classList.toggle("open");
});

JavaScriptの仕事は「押されたらopenクラスを付け外しする」だけ。×への変形もメニューの開閉も、openが付いたときの見た目としてCSS側に書いてあります。

画面幅で出し分ける

実際のサイトでは「PCでは横並び、スマホではハンバーガー」と切り替えるのが定番です。切り替えはメディアクエリ（画面幅による場合分け）で、横並びナビとハンバーガーボタンの表示・非表示を入れ替えます。

/* ふだん（PC）はボタンを隠して、横並びナビを見せる */
.menu-btn {
  display: none;
}

/* 画面幅600px以下（スマホ）で入れ替える */
@media (max-width: 600px) {
  .menu-btn {
    display: flex;
  }
  .pc-nav {
    display: none;
  }
}

横並びナビ側にclass="pc-nav"のような名前を付けておくだけ。この骨組みさえあれば、この記事のどの横並びナビとハンバーガーメニューも組み合わせられます。切り替えの境目（600px）は、自分のメニューが窮屈になり始める幅に合わせて調整してください。

項目が多いなら

ドロップダウンメニュー

項目の上にマウスを乗せると、子メニューが下にひらきます。ページ数が増えてきたサイトの整理に向いています。

.has-child {
  position: relative;
}
.child {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    visibility 0.2s;
}
.has-child:hover .child {
  opacity: 1;
  visibility: visible;
}

子メニューは「親の真下（top: 100%）に隠しておき、親のホバーで表示する」仕組み。display: noneではなくopacityとvisibilityを使うと、ふわっとした表示切り替えになります。

メニューが変になるときのチェックリスト

• 黒丸や左の余白が消えない → <ul>にlist-style: noneとpadding: 0を入れましたか？
• リンクの当たり判定がせまい → <a>にdisplay: blockとpaddingを。文字の部分しか押せない状態を防げます
• stickyが効かない → 親要素にoverflow: hiddenがあると効きません。ヘッダーの親を確認してください
• ドロップダウンの子メニューがずれる → 親の<li>にposition: relativeを付け忘れていませんか？

まとめ

1. メニューの正体はリンクのリスト——<nav>＋<ul>をリセットして、display: flexで横に並べるのが基本形
2. ホバーの動き（ピル背景・伸びる下線）と現在地の表示で、道案内としての親切さが上がる
3. スマホはハンバーガーメニュー——CSSだけならチェックボックス、演出をこだわるならJavaScript数行

気に入った形をひとつ選んで色を差し替えるだけで、サイトの入り口がぐっと本格的になります。