CSSで作るハンバーガーメニューの使い方・問題点・応用例まとめ！サンプルコードも紹介

はじめに
●CSSでのハンバーガーメニューの作り方
●ハンバーガーメニューの使い方
●ハンバーガーメニューの問題点と対処法
●ハンバーガーメニューの応用例
まとめ

はじめに

ウェブサイトには、ハンバーガーメニューと呼ばれるアイコンがあります。

このアイコンは、スマートフォンなどの小さい画面でメニューを表示するためによく使われます。

CSSを使えば、簡単にハンバーガーメニューを作成できます。

本記事では、CSSでハンバーガーメニューを作る方法や使い方、問題点や対処法、そして応用例を詳しく解説します。

また、サンプルコードも提供しています。

●CSSでのハンバーガーメニューの作り方

ハンバーガーメニューは、3本の横線が重なったアイコンです。

CSSで簡単に作ることができます。

次のようなコードを使用することで、ハンバーガーメニューを作成できます。

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

<style>
.hamburger-menu {
  display: inline-block;
  cursor: pointer;
}

.hamburger-menu span {
  width: 30px;
  height: 4px;
  margin-bottom: 5px;
  display: block;
  background-color: #000;
}

.hamburger-menu span:last-child {
  margin-bottom: 0;
}
</style>

上記のコードは、div要素にhamburger-menuというクラスを付与しています。

そして、その中にspan要素を3つ追加しています。

span要素は、横線を表現するためのものです。

CSSでそれぞれのspan要素にスタイルを設定することで、ハンバーガーメニューを完成させます。

●ハンバーガーメニューの使い方

ハンバーガーメニューは、クリックされるとメニューが表示されるようになっています。

そのため、JavaScriptを使用することで、クリックした際にメニューを表示させることができます。

次のようなコードを使用することで、JavaScriptでハンバーガーメニューを実装することができます。

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

hamburger.addEventListener('click', () => {
  hamburger.classList.toggle('active');
  menu.classList.toggle('active');
});

上記のコードは、querySelectorメソッドを使用して、ハンバーガーメニューとメニューを取得しています。

そして、addEventListenerメソッドを使用して、ハンバーガーメニューがクリックされた際に実行される関数を設定しています。

この関数では、classListプロパティを使用して、ハンバーガーメニューとメニューにactiveクラスを追加・削除することで、メニューを表示・非表示にしています。

●ハンバーガーメニューの問題点と対処法

ハンバーガーメニューは、小さな画面でメニューを表示するために便利ですが、下記のような問題点もあります。

メニューが隠れていることがわかりにくい

ハンバーガーメニューは、初めて訪れる人にとっては、メニューが隠れていることがわかりにくいかもしれません。

そのため、ハンバーガーメニューのアイコンをわかりやすくするために、以下のような対処法があります。

メニューの横に「メニュー」というテキストを追加する
ハンバーガーメニューのアイコンの上に矢印を表示する

メニューが長い場合、スクロールが必要になる

メニューが長い場合、スクロールが必要になります。そのため、ハンバーガーメニューをクリックした後、スムーズにスクロールするように次のような対処法があります。

スムーズスクロールを実装する

キーボード操作に対応していない

ハンバーガーメニューは、マウスやタッチパッドでの操作に最適化されていますが、キーボード操作に対応していません。

そのため、次のような対処法があります。

キーボードで操作可能なようにする（例：Enterキーでメニューを表示する）

●ハンバーガーメニューの応用例

ハンバーガーメニューは、さまざまな応用例があります。

下記に、その中からいくつか紹介します。

アニメーションを追加する

ハンバーガーメニューにアニメーションを追加することで、クリックした際の動きがより洗練されたものになります。

次のようなコードを使用することで、ハンバーガーメニューにアニメーションを追加することができます。

.hamburger-menu span:nth-child(1) {
  transform-origin: 0 0;
}

.hamburger-menu span:nth-child(2) {
  opacity: 1;
}

.hamburger-menu span:nth-child(3) {
  transform-origin: 0 100%;
}

.hamburger-menu.active span:nth-child(1) {
  transform: rotate(45deg);
}

.hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
  transform: rotate(-45deg);
}

上記のコードでは、アニメーションを実現するためにtransformプロパティやopacityプロパティを使用しています。

activeクラスが追加された場合には、横線が斜めになってアニメーションが実行されます。

ハンバーガーメニューを右側に配置する

ハンバーガーメニューは、通常は左側に配置されていますが、右側に配置することもできます。

次のようなコードを使用することで、ハンバーガーメニューを右側に配置することができます。

.hamburger-menu {
  position: fixed;
  top: 20px;
  right: 20px;
}

上記のコードでは、positionプロパティを使用して、要素を固定位置に配置しています。

また、topプロパティやrightプロパティを使用して、要素を右上に配置しています。

ハンバーガーメニューにアイコンを追加する

ハンバーガーメニューにアイコンを追加することで、より見た目が良くなります。

次のようなコードを使用することで、ハンバーガーメニューにアイコンを追加することができます。

<div class="hamburger-menu">
  <span class="icon"></span>
  <span></span>
  <span></span>
</div>

<style>
.hamburger-menu {
  display: inline-block;
  cursor: pointer;
}

.hamburger-menu .icon {
  width: 30px;
  height: 30px;
  background-image: url('hamburger-icon.png');
  background-size: contain;
}

.hamburger-menu span {
  width: 30px;
  height: 4px;
  margin-bottom: 5px;
  display: block;
  background-color: #000;
}

.hamburger-menu span:last-child {
  margin-bottom: 0;
}
</style>

上記のコードでは、span要素の先頭にiconクラスを追加し、その中にアイコン画像を表示させています。

また、CSSで画像サイズを設定することで、画像が適切に表示されるようにしています。