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

PENGIN

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

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

JavaScriptとは？何ができるか解説！（js学習ステップ第一弾）
【Webデザイナー向け】JavaScriptsの文法講座（js学習ステップ第二弾）
【これだけ覚えて！】jQueryの書き方（js学習ステップ第三弾）
【コピペOK】ハンバーガーメニューの作り方（js学習ステップ第四弾）（この記事です）

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

>> 【jQueryとは？】Webデザイナーを目指す人向けの基礎知識

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

1 フェードインで現れるハンバーガーメニュー
2 横からニュっと出てくるハンバーガーメニュー
3 最後に

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

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

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

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

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

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

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

index.html
style.css
reset.css
script.js

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本線から☓印になる
メニューが非表示から全画面表示になる

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】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は更新されてるので上のコードに書き換えるか、下の記事を参考に最新版を確認して読み込みコードを記述してください！

CDNについてはこちらの記事で解説

>> 【最新版】jQueryのCDNを読み込む方法【超簡単です！】

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

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

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

2行目：.burger-btnをクリックすると
3行目：.burger-btnにcloseというclassを追加/削除する
4行目：.nav-wrapperにfadeというclassを追加/削除する

こちらの記事もチェック

ここでブラウザの状態を確認すると、ハンバーガーメニューが表示されたときにスクロールできてしまうことがわかるかと思いますので、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');
});

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