CSSナビゲーション・ハンバーガーメニュー見本集｜コピペOKな8パターン

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

メニューはサイトの「入口の案内板」です。

ここが使いにくいと、読者はすぐ離れてしまいます。

この記事では、コピペで使えるナビゲーションメニューとハンバーガーメニューを8パターンまとめました。

実際の動きを見ながら、気に入ったものを選んでコピーしてください。

ハンバーガーはCSSだけで動くものと、JavaScriptを使うものの両方を用意しました。

まずは横並びのナビゲーションから見ていきます。

目次表示

ナビゲーションメニューの見本（横並び）
ハンバーガーメニューをCSSだけで作る
JavaScriptを使うハンバーガーメニュー
スマホはハンバーガー、PCは横並びにする
使うときの注意点とアクセシビリティ
SANGOで使うときの注意点
CSSの追加方法

目次へ

ナビゲーションメニューの見本（横並び）

PCで使う、横に並ぶメニューの見本です。

HTMLはどれも同じ「navの中にul・li・a」という形です。

まず共通のHTMLを載せておきます。

各見本では、このHTMLのクラス名だけを差し替えて使います。

<nav class="cw-nav1">
 <ul>
  <li>
   <a href="#">ホーム</a>
  </li>
  <li>
   <a href="#">ブログ</a>
  </li>
  <li>
   <a href="#">プロフィール</a>
  </li>
  <li>
   <a href="#">お問い合わせ</a>
  </li>
 </ul>
</nav>

1. シンプルな横並びメニュー

迷ったらこれ、という基本形です。

ホバーで背景色がふわっと変わります。

.cw-nav1 ul {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border-bottom: 2px solid #e4ebe4;
  flex-wrap: wrap;
}
.cw-nav1 a {
  display: block;
  padding: 12px 18px;
  color: #2b2f2b;
  text-decoration: none;
  font-weight: 600;
  transition: background .2s, color .2s;
}
.cw-nav1 a:hover {
  background: #f6faf6;
  color: #028a00;
}

2. ホバーで下線が左から伸びる

マウスを乗せると、下線がスッと伸びます。

動きの仕組みをもっと知りたい方は、ホバー効果・アニメーションの記事もあわせてどうぞ。

.cw-nav2 ul {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.cw-nav2 a {
  position: relative;
  display: block;
  padding: 12px 6px;
  color: #2b2f2b;
  text-decoration: none;
  font-weight: 600;
}
.cw-nav2 a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  height: 2px;
  background: #37a845;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.cw-nav2 a:hover::after {
  transform: scaleX(1);
}

3. ホバーで背景がふわっと変わる（角丸型）

角丸のボタン風メニューです。

ポップで、やわらかい印象になります。

.cw-nav3 ul {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: #f6faf6;
  border-radius: 12px;
  flex-wrap: wrap;
}
.cw-nav3 a {
  display: block;
  padding: 10px 16px;
  border-radius: 8px;
  color: #2b2f2b;
  text-decoration: none;
  font-weight: 600;
  transition: background .25s, color .25s;
}
.cw-nav3 a:hover {
  background: #37a845;
  color: #fff;
}

4. 今いるページを強調する

読者が今どのページにいるかを、色と下線で示します。

強調したいリンクに is-current クラスを付けるだけです。

HTMLは、強調したいリンクにだけクラスを足します。

<nav class="cw-nav4">
 <ul>
  <li>
   <a href="#" class="is-current">ホーム</a>
  </li>
  <li>
   <a href="#">ブログ</a>
  </li>
  <li>
   <a href="#">プロフィール</a>
  </li>
  <li>
   <a href="#">お問い合わせ</a>
  </li>
 </ul>
</nav>

.cw-nav4 ul {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 2px solid #e4ebe4;
  flex-wrap: wrap;
}
.cw-nav4 a {
  display: block;
  padding: 12px 18px;
  color: #2b2f2b;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.cw-nav4 a:hover {
  color: #028a00;
}
.cw-nav4 a.is-current {
  color: #028a00;
  border-bottom-color: #37a845;
}

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

ここからはハンバーガーメニューです。

まずはJavaScriptを使わず、CSSだけで開け閉めする方法から紹介します。

仕組みはシンプルです。

目に見えないチェックボックスを1つ用意します。

そのチェックが入っているかどうかで、メニューの表示を切り替えます。

三本線のアイコンは、チェックボックスとつながった label（ラベル）です。

このやり方は「チェックボックスハック」と呼ばれています。

5. 三本線が「×」に変わるメニュー

ボタンを押すと、メニューが下に開きます。

同時に、三本線が×印に変形します。

下のボタンを押して試してみてください。

HTMLはこちらです。

<nav class="cw-ham1">
 <input type="checkbox" id="cw-ham1-check">
 <label for="cw-ham1-check" class="cw-ham1-btn">
  <span></span><span></span><span></span>
 </label>
 <ul class="cw-ham1-menu">
  <li>
   <a href="#">ホーム</a>
  </li>
  <li>
   <a href="#">ブログ</a>
  </li>
  <li>
   <a href="#">プロフィール</a>
  </li>
  <li>
   <a href="#">お問い合わせ</a>
  </li>
 </ul>
</nav>

CSSはこちらです。

.cw-ham1 {
  position: relative;
  display: inline-block;
}
.cw-ham1 input {
  display: none;
}
.cw-ham1-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
}
.cw-ham1-btn span {
  display: block;
  height: 3px;
  background: #2b2f2b;
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.cw-ham1-menu {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transition: max-height .3s ease;
  width: 220px;
}
.cw-ham1-menu a {
  display: block;
  padding: 12px 18px;
  color: #2b2f2b;
  text-decoration: none;
}
.cw-ham1-menu a:hover {
  background: #f6faf6;
  color: #028a00;
}
.cw-ham1 input:checked ~ .cw-ham1-menu {
  max-height: 240px;
}
.cw-ham1 input:checked + .cw-ham1-btn span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.cw-ham1 input:checked + .cw-ham1-btn span:nth-child(2) {
  opacity: 0;
}
.cw-ham1 input:checked + .cw-ham1-btn span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

ポイントは input:checked の部分です。

チェックが入ったときだけ、メニューの高さを広げ、線を×に回転させています。

6. 横からスライドインして背景を暗くする

スマホでよく見る、右から出てくるタイプです。

メニューが開くと、背景がふわっと暗くなります。

この「開いたら全体を暗くする」動きは :has() を使っています。

:has() の仕組みは CSSの :has() を解説した記事で詳しく紹介しています。

下のプレビューは、枠の中だけで動くようにしています。

HTMLはこちらです。

<div class="cw-ham2">
 <input type="checkbox" id="cw-ham2-check">
 <label for="cw-ham2-check" class="cw-ham2-btn">
  <span></span>
  <span></span>
  <span></span>
 </label>
 <label for="cw-ham2-check" class="cw-ham2-overlay">
 </label>
 <ul class="cw-ham2-menu">
  <li>
   <a href="#">ホーム</a>
  </li>
  <li>
   <a href="#">ブログ</a>
  </li>
  <li>
   <a href="#">プロフィール</a>
  </li>
  <li>
   <a href="#">お問い合わせ</a>
  </li>
 </ul>
</div>

CSSはこちらです。

実際のサイトで画面全体に出したいときは、position を fixed に変えてください。

.cw-ham2 input {
  display: none;
}
.cw-ham2-btn {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 30;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  cursor: pointer;
}
.cw-ham2-btn span {
  display: block;
  height: 3px;
  background: #2b2f2b;
  border-radius: 2px;
}
.cw-ham2-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s;
}
.cw-ham2-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 20;
  width: 260px;
  height: 100%;
  margin: 0;
  padding: 72px 0 0;
  list-style: none;
  background: #fff;
  box-shadow: -6px 0 20px rgba(0,0,0,.1);
  transform: translateX(100%);
  transition: transform .3s ease;
}
.cw-ham2-menu a {
  display: block;
  padding: 14px 20px;
  color: #2b2f2b;
  text-decoration: none;
}
.cw-ham2-menu a:hover {
  background: #f6faf6;
  color: #028a00;
}
.cw-ham2:has(input:checked) .cw-ham2-menu {
  transform: translateX(0);
}
.cw-ham2:has(input:checked) .cw-ham2-overlay {
  opacity: 1;
  visibility: visible;
}

暗くなった背景をタップすると、メニューが閉じます。

背景の暗い部分も、同じチェックボックスにつながった label だからです。

JavaScriptを使うハンバーガーメニュー

CSSだけの方法は手軽ですが、弱点もあります。

キーボード操作や読み上げソフトへの対応が、少し不十分になりがちです。

サイトの本番メニューとしてしっかり作るなら、JavaScript版がおすすめです。

ボタンを押したらクラスを付け外しする、という素直な作りです。

7. クラスの付け外しで開閉する基本形

下のボタンで開閉できます。

Escキーを押すか、メニューの外側をクリックしても閉じます。

HTMLはこちらです。

aria-expanded を付けておくと、読み上げソフトに「開いているか閉じているか」が伝わります。

<nav class="cw-gnav">
 <button class="cw-gnav-toggle" aria-expanded="false" aria-controls="cw-gnav-menu">
 <span class="cw-gnav-bar"></span>
 <span class="cw-gnav-bar"></span>
 <span class="cw-gnav-bar"></span>
 </button>
 <ul class="cw-gnav-menu" id="cw-gnav-menu">
  <li>
   <a href="#">ホーム</a>
  </li>
  <li>
   <a href="#">ブログ</a>
  </li>
  <li>
   <a href="#">プロフィール</a>
  </li>
  <li>
   <a href="#">お問い合わせ</a>
  </li>
 </ul>
</nav>

CSSはこちらです。

.cw-gnav {
  position: relative;
  display: inline-block;
}
.cw-gnav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e4ebe4;
  border-radius: 8px;
  cursor: pointer;
}
.cw-gnav-bar {
  display: block;
  width: 100%;
  height: 3px;
  background: #2b2f2b;
  border-radius: 2px;
}
.cw-gnav-menu {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  width: 220px;
  display: none;
}
.cw-gnav-menu.is-open {
  display: block;
}
.cw-gnav-menu a {
  display: block;
  padding: 12px 18px;
  color: #2b2f2b;
  text-decoration: none;
}
.cw-gnav-menu a:hover {
  background: #f6faf6;
  color: #028a00;
}

JavaScriptはこちらです。

(function () {
  var nav = document.querySelector('.cw-gnav');
  if (!nav) return;
  var toggle = nav.querySelector('.cw-gnav-toggle');
  var menu = nav.querySelector('.cw-gnav-menu');
 
  function close() {
    toggle.setAttribute('aria-expanded', 'false');
    menu.classList.remove('is-open');
  }
 
  toggle.addEventListener('click', function (e) {
    e.stopPropagation();
    var open = toggle.getAttribute('aria-expanded') === 'true';
    toggle.setAttribute('aria-expanded', String(!open));
    menu.classList.toggle('is-open');
  });
 
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') close();
  });
 
  document.addEventListener('click', function (e) {
    if (!nav.contains(e.target)) close();
  });
})();

JavaScriptは、外観のCSSとは別の場所に貼ります。

WordPressテーマ（SANGO）なら、カスタマイズ画面の「headやbodyにコードを追加」できる欄や、フッター用のコード欄が使えます。

貼るときは、前後を script タグで囲むのを忘れないでください。

スマホはハンバーガー、PCは横並びにする

実際のサイトでは、画面の幅で切り替えたい場面が多いです。

PCでは横並び、スマホではハンバーガー、という形です。

この切り替えはメディアクエリで作れます。

下のプレビューは、ブラウザの幅を狭くすると表示が変わります。

HTMLはこちらです。

<nav class="cw-resp">
 <input type="checkbox" id="cw-resp-check">
 <label for="cw-resp-check" class="cw-resp-btn">
  <span></span>
  <span></span>
  <span></span>
 </label>
 <ul class="cw-resp-menu">
  <li>
   <a href="#">ホーム</a>
  </li>
  <li>
   <a href="#">ブログ</a>
  </li>
  <li>
   <a href="#">プロフィール</a>
  </li>
  <li>
   <a href="#">お問い合わせ</a>
  </li>
 </ul>
</nav>

CSSはこちらです。

幅600pxを境に、横並びとハンバーガーを切り替えています。

.cw-resp input {
  display: none;
}
.cw-resp-btn {
  display: none;
}
.cw-resp-menu {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.cw-resp-menu a {
  display: block;
  padding: 12px 18px;
  color: #2b2f2b;
  text-decoration: none;
  font-weight: 600;
}
.cw-resp-menu a:hover {
  color: #028a00;
}
 
@media (max-width: 600px) {
  .cw-resp {
    position: relative;
  }
  .cw-resp-btn {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 10px;
    cursor: pointer;
  }
  .cw-resp-btn span {
    display: block;
    height: 3px;
    background: #2b2f2b;
    border-radius: 2px;
  }
  .cw-resp-menu {
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    transition: max-height .3s ease;
  }
  .cw-resp input:checked ~ .cw-resp-menu {
    max-height: 280px;
  }
}

使うときの注意点とアクセシビリティ

メニューは、見た目だけでなく「使いやすさ」も大切です。

作るときに気をつけたいポイントをまとめます。

CSSだけの方法には限界がある

チェックボックスハックは、JavaScriptを書かずに開閉を作れるのが魅力です。

ただしキーボードだけで操作する人や、読み上げソフトを使う人には少し不親切です。

「見て試す用」や「記事内のちょっとしたメニュー」ならCSS版で十分です。

サイトの本番メニューには、JavaScript版を使うのがおすすめです。

押せる範囲は広めにする

リンクの当たり判定は、文字だけでなくブロック全体に広げましょう。

a に display: block を付けて、padding で余白を持たせると押しやすくなります。

既存WordPressテーマのメニューと役割がかぶらないか確認する

既存WordPressテーマには、最初からスマホ用のメニューが用意されていることが多いです。

なので、ヘッダーのメニューを丸ごと置き換える目的では、無理に自作しなくて大丈夫です。

この記事の見本は、記事の中に置くメニューや、自分でデザインを作り込みたいときに向いています。

SANGOで使うときの注意点

SANGOは、リンクやボタンに元からスタイルが当たっています。

そのため、色や余白が思いどおりに変わらないことがあります。

そのときは、変えたい指定のうしろに !important を足してみてください。

他のテーマでは必要ないことも多いので、SANGOで効かないときの対処と考えてもらえれば大丈夫です。

メニューに点（・）が付くとき

SANGOでは、記事内のリストに自動で点が付きます。

この点は list-style ではなく、疑似要素（li の :before）で付いています。

そのため、メニューのCSSに list-style: none を書いても消えません。

今回紹介したコードの点を消したいときは、次のCSSを追加CSSに足してください。

.entry-content .cw-ham1-menu,
.entry-content .cw-ham2-menu,
.entry-content .cw-gnav-menu,
.entry-content .cw-resp-menu {
  list-style: none !important;
}
.entry-content .cw-ham1-menu li::before,
.entry-content .cw-ham2-menu li::before,
.entry-content .cw-gnav-menu li::before,
.entry-content .cw-resp-menu li::before {
  display: none !important;
}

使うメニューのクラス名だけ残して、あとは削っても大丈夫です。

先頭に .entry-content を付けているのは、SANGOの点より指定を強くして、確実に上書きするためです。