スマホ時に頻出のハンバーガーメニュー
クリック時にクラスを追加したり消したりするだけのシンプルな動きで実装。
【ポイント】
・✖️アイコンなど以外にも背景クリック時にも元の画面に戻れるように実装する
script.js
jQuery('.drawer-icon').on('click', function (e) {
e.preventDefault(); //aタグなどクリック時の動作を初期化、クリックイベント作成時には必ずつける
jQuery('.drawer-icon').toggleClass('is-active');
jQuery('.drawer-content').toggleClass('is-active');
jQuery('.drawer-background').toggleClass('is-active');
return false;//古いブラウザへの対処
});
//背景クリック時
jQuery('.drawer-background').on('click', function (e) {
e.preventDefault();
jQuery('.drawer-icon').toggleClass('is-active');
jQuery('.drawer-content').toggleClass('is-active');
jQuery('.drawer-background').toggleClass('is-active');
return false;
});
↧