今回はよくスマホサイトにある、押すとメニューが表示したり非表示になる
3本線のボタン(通称:ハンバーガーメニュー)の作り方を書いていきます!
まずはハンバーガーメニューの完成形コードを載せちゃいます!
コードだけコピペしたいって人はここからどうぞ!
See the Pen GRogGBQ by gaasuu (@gaasuu) on CodePen.
サンプルをわかりやすくするためにヘッダーとメインコンテンツを作成します。
See the Pen JjGPOvx by gaasuu (@gaasuu) on CodePen.
次にメニューを表示・非表示を切り替えるためのボタンを作成していきます。
See the Pen dyGbZYQ by gaasuu (@gaasuu) on CodePen.
ボタンを押した時に、表示・非表示させるメニューを作成します。
See the Pen YzwPvvx by gaasuu (@gaasuu) on CodePen.
ハンバーガーボタンを押してない時はメニューを表示させたくないので
.header-menuに対して
transform:translateX(-120%)
を追加しました。こうすることで画面左側の見えないところにメニューがいることになります。
See the Pen oNbgypB by gaasuu (@gaasuu) on CodePen.
ハンバーガーボタンを押すと左に隠れていたメニューがニュルッと出てきます。
ついでにハンバーガーボタンが×になるようにCSSも指定してみました!
See the Pen GRogGBQ by gaasuu (@gaasuu) on CodePen.
まず、CSSでheader-menuにactiveクラスがついたらメニューが表示するようにします。
nav.header-menu.active { transform: translateX(0%);}
同様に.nav-toggleにもactiveクラスがついたらspanのハンバーガーボタンの各ライン角度が45度回転し×になるようにします。
.nav-toggle.active span:nth-child(1) {top: 18px; left: 6px; transform: rotate(-45deg);} .nav-toggle.active span:nth-child(2),.nav-toggle.active span:nth-child(3) { top: 18px; transform: rotate(45deg);}
そしたらjQueryでactiveクラスの追加、削除をするコードを追加します。
$(function() {$('.nav-toggle').click(function(){$(this).toggleClass('active');if ($(this).hasClass('active')) {$('.header-menu').addClass('active');} else {$('.header-menu').removeClass('active');}});});
言葉にすると、「ハンバーガーボタンを押すたび、toggleClassによりactiveクラスをハンバーガーボタンに追加、削除を交互に繰り返す」
「もしハンバーガーボタンを押した時に、メニューがactiveクラスを持っていなかったら追加、持っていたら削除する」となります。
メニュー表示中のCSSと非表示のCSSを指定して、それをjQueryでクラスの追加、削除によって制御するという感じですね。
意外と簡単だと思えたのではないでしょうか?
先人たちが作って形になっているものもいっぱいあるのでコピペするだけでもいいのですが、理屈をわかってるのとそうでないのではいざというときに自由度が全然違いますので、せめてコードの意味がわかり編集できるようにりましょう!