【コピペOK】ハンバーガーメニューの作り方（js学習ステップ第四弾）

PENGIN

コーディング初学者の多くがつまづくハンバーガーメニュー！今回はハンバーガーメニューを2パターン作成してくよ★

この記事はjQueryについて学ぶステップの4ステップ目です。

今まで、JavaScriptの用途、JSの基本文法、jQueryの書き方を学んで来ました！まだちょっと不安な方はこちらの記事もチェックしてみてください！

この記事ではjQueryを使用したハンバーガーメニューの実装方法について学んでいきます。

フェードインで現れるハンバーガーメニュー

まずはこんな感じのハンバーガーメニューを作っていきます。

ハンバーガーメニュー完成像の確認

ハンバーガーメニューの完成像のコードは以下になります。ざっと確認しておきましょう！

See the Pen Untitled by PENGIN (@cresta_design) on CodePen.

ファイルとフォルダの確認

まずは、こちらのリンクからファイルをダウンロードします。フォルダの中身を確認しましょう！以下のファイルが格納されています。

index.htmlをブラウザで表示しましょう。現状は、SP版のヘッダーのCSSは記述されていない状態です。

HTMLにボタンを追記しよう

それでは、まずHTMLにハンバーガーボタンのパーツとなる要素を書いていきます。headerの閉じタグの前に以下の記述をしましょう。

<button class="burger-btn"><!-- ③ハンバーガーボタン -->
  <span class="bar bar_top"></span>
  <span class="bar bar_mid"></span>
  <span class="bar bar_bottom"></span>
</button>

このHTML要素をCSSで装飾してハンバーガーボタンの見た目を作っていきます。

CSSでボタンを装飾しよう

それではCSSでハンバーガーボタンの見た目を作っていきます。今回は3本線があるだけなので、style.cssのSP版の記述の中に以下のCSSを追記しましょう。

/* ----------------------- */
/* base_sp
/* ----------------------- */
/* デフォルトのbuttonスタイルをリセット */
	button {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background: transparent;
		border: 0;
		border-radius: 0;
		color: inherit;
		cursor: pointer;
		font: inherit;
		margin: 0;
		outline: none;
		padding: 0;
		vertical-align: middle;
	}

先にブラウザにデフォルトで当たっているbuttonタグのスタイルをリセットしておきます。base_spと記載されてる下あたりに追記しましょう。

/* 以下、ハンバーガーボタン */
.burger-btn{
  display: block;
  width: 39px;
  height: 39px;
  position: relative;
  z-index: 3;
  border:none;
}
.bar{
  width: 20px;
  height: 1px;
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
}
.bar_top{
  top: 10px;
}
.bar_mid{
  top: 50%;
  transform: translate(-50%,-50%);
}
.bar_bottom{
  bottom: 10px;
}

次にハンバーガーボタンのスタイルは上の通り。humberger-menuとコメントアウトしている下あたりに追記してください。

※ダウンロードファイル内で、メディアクエリの外（PC用の記述箇所）、headerのスタイル中で.burger-btnをdisplay: none;にしてるのは、PC版で表示されないようにするためです。

CSSでハンバーガーメニューが開いたときの見た目をつくろう

それでは次に、ハンバーガーメニューが開いたときの見た目をつくっていきましょう。ハンバーガーメニューが開いたときは以下2点が見た目の変化をして現れます。

3本線が☓印になるCSS

3本線に対して、closeというclassを付加したときにばつ印になるようにCSSを書いていきます。（closeというclassの付加はjQueryを後ほど使用します）

style.cssのSP版、先ほどハンバーボタンのスタイルを書いた下あたりに以下のCSSを追記しましょう。

.burger-btn.close .bar_top{
  transform: translate(-50%,10px) rotate(45deg);
  transition: transform .3s;
}
.burger-btn.close .bar_mid{
  opacity: 0;
  transition: opacity .3s;
}
.burger-btn.close .bar_bottom{
transform: translate(-50%,-8px) rotate(-45deg);
transition: transform .3s;
}

これで、「.burger-btn」にcloseというclassが追加されたときに、3本線がばつ印になるCSSはOKです。

transitionは時間の指定です。詳しくはこちらの記事をご覧ください。

ハンバーガーメニューを全画面表示にする

次にハンバーガーメニューを全画面表示にするCSSを書きます。さきほどのハンバーガーボタンの下あたりに追記していきましょう。

  /* 以下、ハンバーガーメニュー */
.nav-wrapper{
  /* visibility: hidden; */
  /* opacity: 0; */
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  transition: all .5s;
  z-index: 2;
}
.header-nav{
  width: 100%;
  height: 100%;
  background-color:#1B1310;
  z-index: 2;
}
.nav-list{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}
.nav-item{
  margin-right: 0;
  margin-bottom: 40px;
}

/* メニューオープン時 */
.nav-wrapper.fade {
	visibility: visible;
	opacity: 1;
}

メニューが全画面になっていることと、リストが画面中央に縦並びになっているのを確認したら、一番上のvisibility: hiddenとopacity:0のコメントアウトを外してメニューを非表示にしておきます。

opacity:0を指定しているのは表示・非表示のためというより、オープン時にふわっと表示させるアニメーションのために指定してます。

下部のfadeクラスは、jQueryで切り替えるメニューオープン時のスタイルです。値をhiddenからvisibleにして非表示を表示させる指定に変えます。

※非表示にdisplay: noneでなくvisibility: hiddenを使ってるのは、アニメーション効果を適用させるためです（displayプロパティにはtransitionが効きません！）

jQueryでクリックイベントを設定しよう

それでは最後にjQueryでクリックイベントを設定して、ハンバーガーメニューが開閉するようにしましょう。

まずはindex.htmlのbodyの閉じタグの直前でjQueryとscript.jsを読み込みます。

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

ダウンロードファイルのhtmlには元々記述されているコードがあるかと思いますが、CDNは更新されてるので上のコードに書き換えるか、下の記事を参考に最新版を確認して読み込みコードを記述してください！

次にscript.jsに以下の記述をしましょう！

$(function () {
  $('.burger-btn').on('click', function () {
    $('.burger-btn').toggleClass('close');
    $('.nav-wrapper').toggleClass('fade');
  });
});

上記の記述を日本語であらわすと以下のような感じです。

ここでブラウザの状態を確認すると、ハンバーガーメニューが表示されたときにスクロールできてしまうことがわかるかと思いますので、style.cssとscript.jsに以下の記述を追記します。

【style.css】

.noscroll{
  overflow: hidden;
}

記述はどこでもいいですが、わかりやすいようにハンバーボタンのスタイルの下あたりに追記しておきましょう。

overflowは表示画面外の領域を指定するプロパティで、hiddenは隠す値です。この指定で画面に表示されてない箇所はスクロールできないようになります。

$(function () {
  $('.burger-btn').on('click', function () {
    $('.burger-btn').toggleClass('close');
    $('.nav-wrapper').toggleClass('fade');
    $('body').toggleClass('noscroll'); // 追記
  })
});

クリックイベントの中、4行目で、用意したnoscrollのクラスをbodyにつけ外しする指定を追加します。

これで、ハンバーガーメニューが開いたときにスクロールを固定できます。

横からニュっと出てくるハンバーガーメニュー

次に以下のような横からニュっと出てくるメニューを作りましょう！

ハンバーガーメニュー完成像の確認

ハンバーガーメニューの完成像は以下のような感じです！ボタンを押すと右からメニューが出てきます。

CSSを変更しよう

まずは.nav-wrpperのCSSをすべて下記内容に変更します。

.nav-wrapper {
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	transform: translateX(100%);
	transition: transform .3s;
	width: 100vw;
	z-index: 2; /*キービジュアルと.btn_triggerとの重なりの前後関係を調整*/
}

ポイントはvisibility: hiddenで非表示にしていたところが、transform: translateX(100%)になった点です。これでメニューはX（横）方向に100％分（画面幅分）移動したことで、画面外に消えてます。※transitionのプロパティもopacityからtransformに変えてます。

次に、メニューが表示されたときの見た目もつくっておきましょう。今回はjQueryを使用して’slide-in’というclassが追加されたときに、transform: translateX(0); になるように設定しておきます。

.nav-wrapper.slide-in {
	transform: translateX(0);
}

※さきほどメニューオープン時のスタイルを記述していた.fadeクラスの箇所を上書きすればOKです。

これで、jQueryのtoggleClassでclassの追加/削除するたびに、0.3秒かけてtransform:translateX();の値が100から0に変わります。

jQueryの記述を変更しよう

つぎにscript.jsを書き換えましょう。fadeToggleで表示/非表示を切り替えていた箇所を以下のように書き換えます。

$('.burger-btn').on('click',function(){
  $('.burger-btn').toggleClass('close');
  $('.nav-wrapper').toggleClass('slide-in'); // 書き換え
  $('body').toggleClass('noscroll');
});

これで、横からニュっと出てくるハンバーガーメニューができました！

最後に

当記事はjQueryについて学ぶステップの4ステップ目でした。他記事も見てくれると嬉しいです！

記事内のハンバーガーメニューはかなり簡易的ものですが、ひとまずjQueryを使った動きのあるUIを実装する体験ができたと思います。

PENGIN

ハンバーガーメニューはHTML,CSS,jQuery全てが関わってくるので最初は難しく感じるよね💨
しっかりと学んで理解していこう！

また、レスポンシブ対応含めた実装方法はこちらの記事で解説中です！少し違った書き方を1からじっくり解説しているので、良かったらこちらもご覧ください！

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。