開いたハンバーガーメニューを閉じるJQuery

忘れないうちにメモしておきたい、スマホサイトでハンバーガーメニューを実装したときの参考資料まとめ…

Contents

ハンバーガーメニューを作るとき考える5つのポイント

三本線なのか四本線なのか、MENUの文字はつけるのかetc (PC版のみにあたる「hover」まではここに含む)
押した後の見た目が変化するのかしないのかについて。MENUがCLOSEになる、三が×になるetc
ボタンを押した後にドロワーがどのように出てきてどこに留まるのかetc
他の部分を押したら閉じるようにするのか、CLOSEのみを押したら閉じるようにするのか、開いたときと違うアニメーションにするのかetc
ドロワーの中にどんな項目を入れるのかetc

point5を最初に持ってくる人もいると思います。

私はこの順番で考えていきました。

point1 最初の見た目＆ point2 押したときの動き

こちらのサイトでは、クリック＆ホバー時のCSSがわかりやすく紹介されています。

https://www.nxworld.net/tips/10-css-hamburger-menu-icon-design-and-effect.html

私は今回、仮想サイトを閲覧するユーザーのペルソナ像を「30～50代の保護者」と設定していたので、MENUという文字があったほうが良いのではないかと思って、7番にある「擬似要素でテキストを表示させる」を参考にすることにしました。

これがデザイン性の高い若者向けのサイトだったら文字がなくてもいいのかもしれません。

point3 ドロワーが登場する時の動き

まず、こちらのサイトでは、ハンバーガーメニューを押した時に出てくるドロワーの動きが豊富に紹介されています。

私は2番目の、横からスライドして出てくるドロワーを使うことにしました。

point4 他の部分を触ったらドロワーを閉じるようにする

ドロワーですべての画面を埋めてしまうのではなく、ちょっと元のページがグレーがかって見えてるほうが開いてる感あるかなと思って空けていたので、ドロワー以外の部分を触ったら閉じるよう、JQueryで設定することにしました。

//メニューを押すとドロワー開閉
$(document).ready(function(){

 //メニューボタンで開閉
 $('.menubutton').on('click', function(){ //クリックしたら
 jQuery('#drawer_bg').fadeToggle(300); //ふわっとだす
 jQuery('#drawer').fadeToggle(300); //ふわっとだす
     $(this).toggleClass('active'); //menubuttonクラスにactiveクラスを付与
 $('.hamburger').toggleClass('active'); //hamburgerクラスにactiveクラスを付与
 });

 // 閉じる
 $('#drawer_bg').on('click', function(e) { 

 if($(e.target) != $('#drawer')){

 $('#drawer_bg').animate({width: 'toggle'}, 300);  //横にスライド
 $('#drawer').animate({width: 'toggle'}, 300);  //横にスライド
 $(this).toggleClass('active'); //menubuttonクラスにactiveクラスを付与
 $('.hamburger').toggleClass('active'); //hamburgerクラスにactiveクラスを付与
 }
 });
});

15行目の部分で、タッチした部分がドロワー以外の場合は閉じるように条件分岐を入れました。

今回、ドロワー内部がid=”drawer”で、その他の部分すべてがid=”drawer_bg”になっています。

というのも、ドロワーを表示する時、まず全体にdrawer_bgを敷き（黒20％がかかって影がかかったように見えるようになります）、その上に部分的にdrawerをのせて表示しているので、ドロワー内部以外のすべてがdrawer_bgになるわけです。

なので、drawer_bgのどこかに触れた場合、動作が始まり（13行目）、drawer以外の場所だった場合は閉じるように（15行目以降）という書き方をしました。

きっともっとスマートな書き方があるんだろうな。うん。