ハンバーガーメニューの実装不備に関して

Question

お世話になっております。
ハンバーガーメニューを作成しているのですが、うまく実装されません。

タブレットサイズ769px以下のときにハンバーガーメニューが表示されるように記述していて、ボタンをクリックしたときにheaderにクラスonを追加するように記述していて、検証画面で自分で記述すればメニューが表示されますが、クリック時には追加されません。
どのように記述したらよいか、ご教授いただけますと幸いです。

URLは、こちらです。
https://www.rakuten.ne.jp/gold/japannail/test0706/

よろしくお願い致します。

Answer

ECマスターズの田中です。

ハンバーガーメニュー用のボタンは

として記載されておりますが、

script.js内の記述は
$('.menu_btn').on('click', function () {
と、クラス名が異なっておりますので、
一致するよう修正をお願いします。

なお、divタグがaタグで囲まれており、
このままですとリンクの動作（現ページを再読み込み）が
優先されてしまいます。

クラスの設定先をaタグに変えた上で
https://qiita.com/r_abe01/items/2433caa6ce5257a440e7
上記「preventDefault()」を入れていただく、
aタグを削除した上でCSSの.menuBtn:hoverを利用して見た目を調整していただく、
などの方法でご対応をお願いします。

Answer

クラス名を修正したのですが、headerにクラスonが追加されません。
また、「preventDefault()」の記述位置はこれで問題ないでしょうか。
ご確認お願い致します。

Answer

https://intp.site/389/test/

URLはこちらです。

Answer

ECマスターズの田中です。

ご案内が漏れており、失礼しました。

script.jsはよりも前に読み込まれており、
読み込まれた時点で該当箇所が動作しておりますので、
ページ内に「class="menuBtn"」がまだ読み込まれていないために見つからず、
クリック時の動作の設定ができておりません。

直下のtoTopボタンやfadeinの箇所のように、
$('.menuBtn') から始まる該当箇所を、
$(function(){
と
});
で囲んでいただき、
HTML全体の読込完了と共に動作するようご設定願います。

> また、「preventDefault()」の記述位置はこれで問題ないでしょうか。

位置は結構ですが、
こちらは関数に引き渡された引数のイベントオブジェクトが持つ
メソッドとなりますので、
ご案内差し上げたページの内容に沿って
$('.menuBtn').on('click', function () {
	preventDefault();
を
$('.menuBtn').on('click', function (e) {
	e.preventDefault();
のようにご変更いただきますようお願いします。

Answer

ありがとうございました。