【コピペOK】初心者向けハンバーガーメニューの作り方（HTML/CSS/JavaScript）

ハンバーガーメニューとは

ハンバーガーメニューとは、Webサイトやアプリで使用されるナビゲーションメニューの一種です。三本線（☰）のアイコンで表示されることが多く、その見た目がハンバーガーに似ていることから「ハンバーガーメニュー」と呼ばれています。

主にスマートフォンやタブレットなどの画面サイズが限られたデバイスで利用されており、メニュー項目をコンパクトにまとめられる点が特徴です。アイコンをタップまたはクリックすると、ナビゲーションメニューが表示される仕組みになっています。

近年ではモバイルサイトだけでなく、レスポンシブデザインを採用したWebサイトやWebアプリでも広く活用されています。限られた表示領域を有効活用できるため、ユーザーが快適にサイト内を移動できるナビゲーション手法として定着しています。

ハンバーガーメニューを使用するメリット

• 画面スペースを節約できる
• ナビゲーションをすっきり整理できる
• スマートフォンやタブレットとの相性が良い
• レスポンシブデザインに対応しやすい

ハンバーガーメニューは、ユーザー体験を損なうことなく多くのメニュー項目を管理できるため、現在のWeb制作において欠かせないUIパーツの一つです。

ハンバーガーメニューを作るために必要なもの

ハンバーガーメニューを実装するには、主に「HTML」「CSS」「JavaScript」の3つの技術を使用します。それぞれの役割を理解しておくことで、実装やカスタマイズがしやすくなります。

HTML

HTMLは、ハンバーガーメニューの構造を作成するために使用します。メニューボタンやナビゲーションメニューなどの要素を配置し、ページの骨組みを作ります。

CSS

CSSは、ハンバーガーメニューの見た目を整えるために使用します。三本線のアイコンを作成したり、メニューのレイアウトや色、アニメーションなどを設定したりできます。

JavaScript

JavaScriptは、ハンバーガーメニューの開閉を制御するために使用します。ボタンをクリックした際にメニューを表示・非表示に切り替える処理や、アニメーションの制御を実装できます。

【コピペOK】HTML/CSS・JavaScriptでハンバーガーメニューを実装する方法

ここからは、実際にハンバーガーメニューを実装する方法を解説します。 まずは完成イメージを確認したうえで、HTML・CSS・JavaScriptを順番に作成していきましょう。

今回作成するハンバーガーメニューは、以下の機能を備えています。

• クリックでメニューを開閉できる
• レスポンシブデザインに対応しやすい
• アニメーション付きで視認性が高い
• アクセシビリティを考慮したbuttonタグを使用

まずはHTMLでメニューの構造を作成します。

HTMLコード

以下のコードをHTMLファイルに記述してください。

<header class="header">
  <button
    class="hamburger-menu"
    aria-label="メニューを開く"
    aria-expanded="false"
    aria-controls="global-menu"
  >
    <span></span>
    <span></span>
    <span></span>
  </button>

  <nav id="global-menu" class="menu">
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">会社概要</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

buttonタグを使用することで、キーボード操作やスクリーンリーダーにも対応できます。また、aria-expandedやaria-controlsを設定することで、アクセシビリティの向上にもつながります。

CSSコード

続いて、ハンバーガーメニューのデザインをCSSで整えます。以下のコードでは、三本線のアイコン表示やメニューのレイアウトを設定しています。

/* ヘッダー */
.header {
  position: relative;
}

/* ハンバーガーボタン */
.hamburger-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 32px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* 三本線 */
.hamburger-menu span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* ナビゲーションメニュー */
.menu {
  display: none;
  position: absolute;
  top: 50px;
  right: 0;
  min-width: 200px;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu li {
  border-bottom: 1px solid #eee;
}

.menu li:last-child {
  border-bottom: none;
}

.menu a {
  display: block;
  padding: 12px 16px;
  color: #333;
  text-decoration: none;
}

.menu a:hover {
  background-color: #f5f5f5;
}

/* メニュー表示時 */
.menu.is-active {
  display: block;
}

この時点では、ハンバーガーメニューの見た目のみ完成しています。メニューをクリックしてもまだ開閉できないため、次はJavaScriptを使って表示・非表示を切り替える処理を実装しましょう。

JavaScriptコード

最後に、JavaScriptでハンバーガーメニューの開閉機能を実装します。以下のコードを追加することで、ボタンをクリックした際にメニューの表示・非表示を切り替えられます。

const hamburgerButton = document.querySelector('.hamburger-menu');
const menu = document.querySelector('.menu');

hamburgerButton.addEventListener('click', () => {
  const isExpanded =
    hamburgerButton.getAttribute('aria-expanded') === 'true';

  hamburgerButton.setAttribute(
    'aria-expanded',
    !isExpanded
  );

  menu.classList.toggle('is-active');
});

上記のコードでは、addEventListener()を使用してハンバーガーボタンのクリックイベントを監視しています。クリックされるたびにis-activeクラスを付け外しし、メニューの表示・非表示を切り替えています。

また、aria-expanded属性も同時に更新しているため、スクリーンリーダーを利用するユーザーにも現在の状態が正しく伝わります。アクセシビリティを考慮した実装は、ユーザー体験の向上だけでなくWebサイトの品質向上にもつながります。

実装結果

ここまでのHTML・CSS・JavaScriptを組み合わせることで、クリックで開閉できるハンバーガーメニューを実装できます。

次のセクションでは、さらに見栄えを良くするために、三本線から×マークへ変化するアニメーションの実装方法を解説します。