ハンバーガーメニューは、 とてもシンプルで使いやすさが格段にアップしますよね。

でも、素人が作成しようと思うと結構大変なイメージありますよね。

悩む人

ハンバーガーメニューってシンプルで見やすい。でも、作成するのは難しいよね。

moridai

実はそこまで難しくありませんよ！

悩む人

だって、JavaScriptとかも使うんでしょ？

moridai

手順通りに進めると簡単に実装できます。

今回は、JavaScriptを使ってハンバーガーメニューを簡単に作成する方法について解説していきます。

See the Pen
ハンバーガーメニュー by moridai1104 (@moridai1104)
on CodePen.

ハンバーガーメニューとは？実装の効果

ハンバーガーメニューは、主にモバイルデバイスや小さな画面サイズのデバイスで利用されるナビゲーションメニューの一つです。

このメニュースタイルは、画面領域を節約し、ユーザーエクスペリエンスを改善するために使われます。

1. スペースの節約と整理: 小さな画面サイズでは、画面上にすべてのナビゲーション項目を表示するのは難しい場合があります。ハンバーガーメニューは、スペースを節約し、必要な場合にメニューを展開できるようにします。
2. デザインのシンプル化: ハンバーガーメニューはシンプルなアイコン（通常は三本線のアイコン）で表現されるため、デザインをすっきりさせる効果があります。
3. ユーザビリティの向上: メニューが隠れていることから、メインコンテンツに焦点を当てることができ、ユーザーによりスムーズな閲覧体験を提供します。必要な場合にメニューを開くことで、必要な情報にアクセスできます。
4. モバイルフレンドリーな設計: レスポンシブデザインでの重要な要素であり、モバイルデバイスでの使用に最適化されたナビゲーションメニューです。

一方で、ハンバーガーメニューの効果的な利用には注意も必要です。

一部のユーザーはハンバーガーメニューのアイコンが意味する機能を理解していない場合があります。また、常にメニューが隠れていることで、一部のユーザーがナビゲーションのオプションを見逃す可能性があります。

ハンバーガーメニューを使用する場合は、適切なアイコンやラベリングを行い、ユーザーにとって直感的な操作ができるようにすることが重要です。

moridai

それでは、JavaScriptを使ってハンバーガーメニューを簡単に作成する方法について解説していきます。

JavaScriptを使ってハンバーガーメニューを簡単に作成する方法

HTML構造の設定

HTML構造の設定：ハンバーガーメニューとナビゲーションメニューの基本的なHTMLを作成します。

<button class="hamburger-button">
<span class="hamburger-icon"></span>
</button>

<nav class="menu-container">
<ul class="menu-list">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<!-- 他のメニュー項目を追加 -->
</ul>
</nav>

1. `<button class=”hamburger-button”>`:
– ハンバーガーメニューのトリガーとなるボタンです。

– `hamburger-button`クラスが適用されています。このクラスはCSSやJavaScriptでボタンを操作するための識別子です。

– `<span class=”hamburger-icon”></span>`が内部にあり、ハンバーガーアイコンを表します。このアイコンはCSSでスタイリングされます。

2. `<nav class=”menu-container”>`:
– メニューコンテナを定義しています。

– `menu-container`クラスが適用されており、このクラスはCSSでメニューコンテナを操作するための識別子です。

– メニューコンテナ内にはリンクのリストが含まれており、メニューアイテムの一覧を表します。

ハンバーガーメニューは、ボタン（`hamburger-button`）をクリックすることで、JavaScriptによってメニューコンテナ（`menu-container`）が表示されたり非表示になったりするように操作されます。メニューコンテナにはリンクのリストが含まれており、これが実際のメニュー項目を表しています。

CSSでスタイリング

CSSでスタイリング：ハンバーガーメニューアイコンとナビゲーションメニューのスタイルを設定します。

/* ハンバーガーメニューのアイコンのスタイル */
.hamburger-icon {
width: 30px;
height: 3px;
background-color: #333;
display: block;
transition: all 0.3s ease;
/* 三本の線を横に並べる */
&::before,
&::after {
content: '';
display: block;
width: 100%;
height: 3px;
background-color: #333;
transition: all 0.3s ease;
}
/* 三本の線を配置する */
&::before {
transform: translateY(-8px);
}
&::after {
transform: translateY(5px);
}
}

/* メニューコンテナ */
.menu-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: #fff;
width: 250px;
transform: translateX(250px);
transition: transform 0.3s ease;
}

/* メニューアイテム */
.menu-list {
list-style: none;
padding: 20px;
}

.menu-list li {
margin-bottom: 15px;
}

.menu-list li a {
text-decoration: none;
color: #333;
font-size: 18px;
}

1. `.hamburger-icon`:
– ハンバーガーメニューのアイコンを定義しています。

– `width`と`height`でアイコンのサイズを指定し、`background-color`で線の色を設定しています。

– `display: block;`は、要素をブロック要素として表示するための指定です。

– `transition`プロパティは、変化が起きた際のアニメーション効果を設定しています。

– `&::before`と`&::after`は、`hamburger-icon`内の疑似要素を使用して、三本の横線を作成しています。

– `transform`プロパティを使用して、それぞれの線の配置を調整しています。

2. `.menu-container`:
– メニューコンテナのスタイルを定義しています。

– `position: fixed;`で画面上部に固定されるように指定しています。

– `transform: translateX(250px);`で初期状態では画面外にメニューコンテナが移動するようにしています。

– `transition`プロパティは、メニューコンテナの表示・非表示時のアニメーション効果を設定しています。

3. `.menu-list`:
– メニューアイテムのリストに関するスタイルを定義しています。

– `list-style: none;`でリストのデフォルトのマーカーを非表示にしています。

– `padding`や`margin`を使用して、リストアイテム間の間隔を設定しています。

4. `.menu-list li a`:
– メニューアイテムのリンクに関するスタイルを定義しています。

– `text-decoration: none;`でリンクの下線を削除し、`color`と`font-size`でテキストの色やサイズを指定しています。

これらのスタイルは、ハンバーガーメニューのアイコンとメニューコンテナ、メニューアイテムの表示やレイアウトを制御するためのものです。

moridai

これを使って、ハンバーガーメニューを見栄え良くデザインできます。

JavaScriptで動作を追加

JavaScriptで動作を追加：ハンバーガーメニューをクリックした時にメニューを表示・非表示にするJavaScriptを追加します。

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

let isMenuOpen = false;

hamburgerButton.addEventListener('click', () => {
if (!isMenuOpen) {
menuContainer.style.transform = 'translateX(0)';
isMenuOpen = true;
} else {
menuContainer.style.transform = 'translateX(250px)';
isMenuOpen = false;
}
});

1. `const hamburgerButton = document.querySelector(‘.hamburger-button’);`
– `.hamburger-button`クラスを持つ要素（通常はボタン）を変数`hamburgerButton`に格納しています。これはハンバーガーメニューのトリガーとなる要素です。

2. `const menuContainer = document.querySelector(‘.menu-container’);`
– `.menu-container`クラスを持つ要素（通常はメニューコンテナ）を変数`menuContainer`に格納しています。これはメニューのコンテンツを含む要素です。

3. `let isMenuOpen = false;`
– メニューが開いているか閉じているかを示すフラグ`isMenuOpen`を定義し、最初は`false`（閉じている状態）に設定しています。

4. `hamburgerButton.addEventListener(‘click’, () => { … });`
– `hamburgerButton`（ハンバーガーボタン）がクリックされた際のイベントを監視しています。

5. クリックイベントの中身:
– クリックが検出された際に、`if`文を使ってメニューの状態を切り替えます。

– `if (!isMenuOpen)`は、メニューが閉じている場合に実行されます。その場合、`menuContainer`の`transform`プロパティを`translateX(0)`に変更し、メニューを表示（左端に移動）させます。

– `else`ブロックでは、メニューが開いている場合に実行されます。その場合、`menuContainer`の`transform`プロパティを`translateX(250px)`に変更し、メニューを非表示（右端に移動）させます。また、`isMenuOpen`の値を逆に反転させています。

このコードは、ハンバーガーメニューのボタンがクリックされた時に、メニューコンテナの表示・非表示を切り替える役割を果たします。

筆者が作ったハンバーガーメニュー

自作テーマ2作目
ようやくハンバーガーメニューが完成！
細かい装飾はこれからとして、ひとまずは動くところまでこぎつけた😜
コツコツ頑張ろうな👍#駆け出しエンジニアと繋がりたい #駆け出しエンジニア pic.twitter.com/80i9TZCBNh

— moridai@エンジニア (@MoridaiEngineer) November 7, 2023

美容室やサロンのサイトをイメージして作成しました。

左上部にハンバーガーメニューを作り、クリックすると3つのメニューが出現。

WP自作テーマのレスポンシブル対応
美容室やネイルサロン向けのテーマをイメージして作成中👍少しずつ思い描いているものに近づいてきた⭐️
時間はかかるが確実に前進している😄
コツコツ頑張ろうな👍#駆け出しエンジニアと繋がりたい #駆け出しエンジニア #朝活 pic.twitter.com/dSfoWJzMCw

— moridai@エンジニア (@MoridaiEngineer) November 22, 2023

レスポンシブ対応もしていて、画面幅が大きくなると横並びになりメニューが切り替わる。

moridai

製作時間は20分～30分くらいでできるのでチャレンジしてみてください！

まとめ

1. ハンバーガーメニューとは？

ハンバーガーメニューは、ウェブサイトやモバイルアプリなどでよく使われるメニューアイコンです。通常は3本の水平線で表され、クリックやタップするとメニューが展開します。

小画面でのナビゲーションを整理し、スペースを節約するために利用されます。

2. JavaScriptを使ってハンバーガーメニューを簡単に作成する方法

2.1 HTML構造の設定

ハンバーガーメニューを作るためには、適切なHTML構造が必要です。通常は<div>や<nav>タグを使用して、アイコンやメニュー項目を配置します。

2.2 CSSでスタイリング

見た目を整えるためにCSSを使います。アイコンの大きさや色、メニューの表示方法などを指定してデザインを調整します。

2.3 JavaScriptで動作を追加

JavaScriptを使用して、ハンバーガーアイコンをクリックしたときにメニューを表示・非表示する動作を実装します。クリックイベントやCSSクラスの追加・削除などを利用して、メニューの開閉を実現します。