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

hamburger HTMLコーダー
レスポンシブ対応でモバイル向けにハンバーガーメニューを作りたいけどどうやって作るんだろう…
実際に作ってみたので解説させていただきます。

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

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

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

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

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

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

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

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

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

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

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

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

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

初めに思いついたのはどちらも画像にして、クリックで画像が切り替わる感じかな、と思ったのですが以外と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;」を指定しています。
hamburger

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

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

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

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

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

カスタム例

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

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

CSS

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

hamburger

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

CSS

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

hamburger

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

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

hamburger

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

閉じるボタンを作る

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

ここから先はハンバーガーボタンがクリックされたら発動する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">メニュー1</a></li>
        	<li><a href="#2">メニュー2</a></li>
        	<li><a href="#3">メニュー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;
}

hamburger

「left: -400px」で初期状態では左枠外に追いやっておき、クリックされた場合のクラス指定でleft: 8pxとして枠内に移動させています(8pxは適当に適宜調整)

position: fixedでどんな場合でもその位置に固定になります。どういうことかというとページ内をスクロールしていてもメニューは同じ場所に既存コンテンツにかぶさる形で表示されるということです。

おなじようにハンバーガメニューの部分もfixedに変えておけばページをスクロールしても追従してきます。

その場合はこのmenu部分にはハンバーガメニュー分、下にずらす為にtop: 60px;のような上からの位置調整してあげましょう。

カスタム例

もう少しゆっくりアニメーションさせたいという場合は「transition: all 0.3s;」の0.3sを0.6sに変更したり値を大きくしてください。

今回は左側に隠したメニューが左から出現するというメニューですが、右側からにしたい場合は「left: -400px;」のleftをrightに変えて、.clicked .menuの「left: 8px;」もrightに変えれば右からきたメニューが右端に現れる形になります。

topなどでも同様です。

まとめ

ここまで理解すればどんな形のハンバーガーメニューを作ることになっても対応できるのではないかなと思います。

今回のことが理解できるとハンバーガーメニュだけではなく、transitionを利用したアニメーションチックな動きが使えるようになります。

ぜひ習得して、今後のWebサイトを作りの際に役立てて頂ければ幸いです。