【コピペでできる！】jQueryを使用したハンバーガーメニューの作り方

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

1. 【事例で学ぶ】JavaScriptとは何か？
2. Webデザイナーが知っておくべきJavaScriptの最低限の文法
3. 【これだけ覚えて！】jQueryの書き方
4. 【コピペでできる！】jQueryを使用したハンバーガーメニューの作り方（この記事です）

今まで、JavaScriptの用途、JSの基本文法、jQueryの書き方を学んで来ました！！この記事ではいよいよハンバーガーメニューの実装方法について学んでいきましょう。

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

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

完成像の確認

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

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

まずは、こちらのリンクからファイルをダウンロードします。

フォルダの中身を確認しましょう！以下のファイルが格納されています。

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

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

HTMLにボタンを追記しよう

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

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

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

⚠上記の記述は、賛否両論あると思います。divタグをbuttonにした方が良いとか、spanではなくsvg、または、疑似要素にすべきとか。解説の簡単さを重視して、そういった異論は一旦無視します。

CSSでボタンを装飾しよう

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

.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;
}

PC版の方では「.burger-btn」をdisplay: none;にしておきましょうね。

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です。

メニューを全画面表示にする

次にメニューを全画面表示にするCSSを書きます。PC版では横並びになっているメニューを縦に並べるのも忘れないようにしましょう。

.nav-wrapper{      
  /*display: none;*/      
  width: 100vw;      
  height: 100vh;      
  position: fixed;      
  top: 0;      
  left: 0;       
  z-index: 2;     
}     
.header-nav{        
  width: 100%;        
  height: 100%;        
  background-color:#1B1310;        
  z-index: 2;      
}     
.header-nav.nav-list{        
  display: block;        
  position: absolute;        
  top: 50%;        
  left: 50%;        
  transform: translate(-50%,-50%);        
  text-align: center;      
}      
.header-nav.nav-item{        
  margin-right: 0;        
  margin-bottom: 40px;      
}

上記が追記できたら、一番上の display:none; のコメントアウトを外して非表示にしておきます。

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

それでは最後にjQueryでクリックイベントを設定しましょう。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
<script src="./js/script.js"></script>

jQueryはGoogleが提供しているCDNを使用しています。

それでは、script.jsに以下の記述をしましょう！

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

上記の記述を日本語にします。

• 1行目：.burger-btnをクリックすると
• 2行目：.burger-btnにcloseというclassを追加/削除する
• .nav-wrapperがフェードイン/フェードアウトする

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

【style.css】

body.noscroll{
  overflow: hidden;
}

【script.js】

$('.burger-btn').on('click',function(){
  $('.burger-btn').toggleClass('close');
  $('.nav-wrapper').fadeToggle(500);
  $('body').toggleClass('noscroll');
});

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

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

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

完成像の確認

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

CSSを変更しよう

まずは、.nav-wrpperのCSSを変更します。display: none;になっている部分をtransform: translateX(100%); に書き換えましょう。ついでにtransitionも追記しておきます。

以下のようなコードになります。

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

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

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

これで、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');
});

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