ネガティブmarginについて
ハンバーガーメニューを使うときに、使われると思います。
通常、marginは正の数で表されますが、実はマイナス表記も設定することができます。
これを使用することで、親要素と重なって使用することができる。
今回の使用でいうと、ブラウザの外側にCSSでセットしてそれをjQueryで設定するような感じです。(語彙力)
トランスフォームプロパティ
要素の移動、拡大、縮小、回転に使います。
transform. transalate3d（）とすると、x軸（横）、Ｙ軸（縦）、Z軸(奥行き)の移動に使用することができます。
今回のハンバーガーメニューでは、メニュー内容をクリックしたときにメニュー内容一覧が出てくるようにします。
このとき、イベント発生時というのは、ユーザーがクリックしたときです。
index.html
<div id="wrapper">
<nav id="nav">
今回のターゲットのHTMLは上記になります。
このタグに対して、jQueryを当てて行きます。
index.js
$(document).ready(function() {
$('#open_nav').on('click', function() {
$('#wrapper, #nav').toggleClass('show');
});
});
前回の記事で書いたようにお決まりの始まりから記述していきます。
open_navでクリックイベントで関数、
ファンクション内での処理は、上記のindex.htmlに記述された要素wrapperとnavを取得します。
toggleClassメソッドでshowがついていた場合は追加、ない場合は削除。
今回の場合は、クラスをイベント発生時に追加する形になります。