HTML＆CSSで作るハンバーガーメニュー

はじめに

Webサイトやアプリのナビゲーションでよく見かける「ハンバーガーメニュー」。
実はJavaScriptを使わなくても、HTMLとCSSだけで実装することができます。
この記事では、2つのアプローチ（CSSのみ／SVG利用）でハンバーガーメニューを作る方法を解説します。
「なるべく軽量に実装したい」「カスタマイズしやすいUIを作りたい」方の参考になれば幸いです。

CSSで作る方法

index.html

<div class="hamburger">
  <span></span>
  <span></span>
  <span></span>
</div>

style.css

.hamburger {
  width: 40px;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.hamburger span {
  display: block;
  height: 4px;
  background: #333;
  border-radius: 2px;
  transition: all 0.3s;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(13px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-13px) rotate(-45deg);
}

script.js

const hamburger = document.querySelector('.hamburger');
hamburger.addEventListener('click', function() {
this.classList.toggle('active');
});

クリックするとバツ印に変化します。

SVGで作る方法

SVGを使えば、より細かいカスタマイズやアニメーションが可能です。

index.html

<button class="svg-hamburger" aria-label="メニューを開く">
  <svg width="40" height="30" viewBox="0 0 40 30">
    <rect class="line top"    x="0" y="5"  width="40" height="4" rx="2"/>
    <rect class="line middle" x="0" y="13" width="40" height="4" rx="2"/>
    <rect class="line bottom" x="0" y="21" width="40" height="4" rx="2"/>
  </svg>
</button>

style.css

.svg-hamburger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.line {
  fill: #333;
  transition: all 0.3s;
}

.svg-hamburger.active .top {
  transform: translateY(8px) rotate(45deg);
  transform-origin: 20px 7px; /* rectの中心点付近 */
}
.svg-hamburger.active .middle {
  opacity: 0;
}
.svg-hamburger.active .bottom {
  transform: translateY(-8px) rotate(-45deg);
  transform-origin: 20px 25px; /* rectの中心点付近 */
}

script.js

const svgHamburger = document.querySelector('.svg-hamburger');
svgHamburger.addEventListener('click', function() {
  this.classList.toggle('active');
});

クリックするとバツ印に変化します。

Tips

• アクセシビリティ向上のため、aria-labelやbuttonタグを使いましょう
• メニューの開閉状態は.activeなどのクラス付与で管理
• PCとスマホでサイズや位置を調整するメディアクエリも有効
• SVGの場合、CSS以外にSMILアニメーションやGSAP等での演出も可能
• 背景を暗くする「オーバーレイ」と組み合わせると使いやすい

最後に

今回はHTML＆CSS（＋SVG）だけで作るシンプルなハンバーガーメニューの実装方法を紹介しました。
工夫次第でデザインや演出の幅も広がります。
「できるだけ軽く、JavaScriptレスで実装したい」「SVGを活かしたリッチな演出をしたい」など、用途や好みに応じて使い分けてみてください！