【HTML&CSS】ハンバーガーメニューの作り方【自分でカスタマイズ可能】

レスポンシブ対応でモバイル向けにハンバーガーメニューを作りたいけどどうやって作るんだろう…

実際に作ってみたので解説させていただきます。

この記事の内容は

最初に理解した方がいいこと
ハンバーガーボタンを作る
閉じるボタンを作る
メニュー部分を作る

最初に理解した方がいいこと

色々なサイトを参考にハンバーガーメニューを作成してみましたが、一つ言えることがあります。

それは*自分が作成したいサイトにドンピシャではまる作り方は絶対に見つからない！*ということです。

かならず何かしらのカスタムをする必要があり、その時ただコピペしてきただけのコードではカスタムが難しいです。

なので最初にハンバーガーメニューを構成する部品を理解し、一から組み上げる経験をしておくべきだと思います。

ハンバーガーメニューを構成する部品

それではどんな部品があるかというと以下の部品です。

ハンバーガー（三）ボタン
閉じる（×）ボタン
メニュー部分（通常時非表示）

とまぁ構成する部品は非常にシンプルです。あとは、

ハンバーガーボタンを押すとボタンが閉じるボタンに切り替わる
ハンバーガーボタンを押すとメニュー部分が表示される
閉じるボタンを押すとメニュー部分が非表示になる）

といった動きをどうするかという動きの部分ですね。

ハンバーガーボタンを作る

最初にボタン部分を作っていきます。

初めに思いついたのはどちらも画像にして、クリックで画像が切り替わる感じかな、と思ったのですが以外とCSSのみで表現できるようです。

HTML

<div class="ham">
	<span class="ham_line ham_line1"></span>
	<span class="ham_line ham_line2"></span>
	<span class="ham_line ham_line3"></span>
</div>

CSS

.ham {
	position: relative;
	width: 40px;
	height: 40px;
	cursor: pointer;
	background-color: aqua;
}
.ham_line {
	position: absolute;
	left: 10px;
	width: 20px;
	height: 1px;
	background-color: #333333;
}
.ham_line1 {
	top: 10px;
}
.ham_line2 {
	top: 18px;
}
.ham_line3 {
	top: 26px;
}

どういうことかわかりやすいように「background-color: aqua;」を指定しています。

まず.hamで指定しているwidthとheightの40pxがハンバーガーとしてクリックできる範囲となります。

もっと大きい四角にしたい、小さい四角にしたいという場合にはこの数値をいじればOKです。

その場合に合わせて調整しなければいけないのがham_lineのleftとham_line1～3のtopです。

左からの余白と、各ラインが上から何ピクセルの場所にあるかの指定です。

線を太くしたい・色を変えたい場合はham_lineのheightとbackground-colorを変更します。

カスタム例

もう少し大きいハンバーガメニューを作りたいとします。まずは枠を大きくします。

※以下CSSは変更箇所だけ記載しますので、その他部分は消すのではなくいじらない想定です

CSS

.ham {
	width: 60px;
	height: 60px;
}

これだと線が短すぎるので線の長さを長くし、ついでに線も太くしてみます。

CSS

.ham_line {
	width: 40px;
	height: 3px;
}

このままだとハンバーガーっぽくないので、各ラインの間隔を調整します。
CSS

.ham_line1 {
	top: 15px;
}
.ham_line2 {
	top: 28px;
}
.ham_line3 {
	top: 41px;
}

こんな感じで作成するサイトに合わせて大きさや線の太さなどをカスタマイズしてください。

閉じるボタンを作る

普通に×を表示させるだけでいいんですが、せっかくなので先ほどのラインをアニメーションさせて×に変化させる形にしてみたいと思います。

ここから先はハンバーガーボタンがクリックされたら発動するJavaScriptの知識も少し必要です。まずはそちらから解説します。

HTML

<div class="ham" id="ham">

JavaScript

const ham = document.getElementById('ham');
ham.addEventListener('click', function() {
	alert('test');
});

classでhamを指定していた部分に「id=”ham”」を追加しています。

javascriptではそのid=hamが指定されているdivがクリックされた場合に発動するイベントを指定しています（ここではただアラートを出すだけ）

この部分がわかっていないとあとあと辛くなるかもしれないので、この部分がもしわからなければご自身の開発環境で実際に試してみて理解することをおすすめします。

JavaScriptはscriptタグで囲ってHTML内に一緒に記述する形でも勉強段階ではOKかと思います。その場合はHTML内の一番下に書くように注意しましょう（最後に読み込ませないとID指定の部分などが動作しないです）

次にクリックされた際の処理にCSSのクラスを割り当てる処理を追加し、そのクラスが割り当てられている場合はハンバーガーボタンが×ボタンになるよう指定します。

JavaScript

ham.addEventListener('click', function() {
	ham.classList.toggle('clicked');
});

CSS

.ham_line {
	transition: all 0.3s;
}

/* 以下はすべて新規行で追加 */
.clicked .ham_line1 {
	transform: rotate(45deg);
	top: 20px;
}
.clicked .ham_line2 {
	width: 0px;
}
.clicked .ham_line3 {
	transform: rotate(-45deg);
	top: 20px;
}

JavaScriptではクラスhamがクリックされた場合に「clicked」というクラスを追加しています。

CSSではclickedというクラスが指定されている場合のライン1～3の挙動を指定。

ライン1：rotate(45deg)で時計回りに45度回転させます、
ライン2：width: 0pxで実質非表示に変更させます
ライン3：rotate(-45deg)で反時計回りに45度回転させます

これで3つの線を×へと変化させています。

さらにクラスham_lineにtransition: all 0.3s;を追加しています。これは0.3秒のアニメーションで表現する指定です。

メニュー部分を作る

これは簡単ですね。まずは普通にメニュー部分を作ります。

HTML

<div class="menu_wrapper" id="menu_wrapper">
	<div class="menu">
    	<ul>
        	<li><a href="#1">メニュー１</a></li>
        	<li><a href="#2">メニュー２</a></li>
        	<li><a href="#3">メニュー３</a></li>
    	</ul>
	</div>
</div>

CSS

.menu {
	width: 300px;
	height: 300px;
	background-color: aquamarine;
}

またもやわかりやすく色をつけていますが、メニューの見た目はなんでもOKです。

今回はこいつを左端に追いやって、メニューをクリックで左側から出てくるという実装にしてみます。

JavaScript

const ham = document.getElementById('ham');
const menu_wrapper = document.getElementById('menu_wrapper');
ham.addEventListener('click', function() {
	ham.classList.toggle('clicked');
	menu_wrapper.classList.toggle('clicked');
});

CSS

.menu {
	position: fixed;
	width: 300px;
	height: 300px;
	left: -400px;
	background-color: aquamarine;
	transition: all 0.3s;
}
.clicked .menu {
	left: 8px;
}